.sidelist {
    background-color: var(--container-colour);
    border: 1px solid var(--container-border);
    margin-top: var(--global-spacing);
}

.sidelist-title {
    background-color: var(--accent-colour1);
    font-family: var(--font-header);
    font-weight: 700;
    font-size: 1.2em;
    line-height: 1.5em;
    padding: var(--global-spacing-0-5x) var(--global-spacing-1-5x) 0;
}

.sidelist-body {
    display: flex;
    flex-direction: column;
    padding: var(--global-spacing-0-5x);
}

.sidelist-body > p {
    font-size: 0.9em;
    line-height: 1.5em;
    margin: 0 0.1em 0.1em 0.1em;
}

.sidelist-body > p a {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--accent-colour3);
}
.sidelist-body > p a:visited {
    text-decoration-color: var(--accent-colour2);
}
.sidelist-body > p a:hover,
.sidelist-body > p a:focus {
    text-decoration-style: solid;
}
.sidelist-body > p a:active {
    text-decoration-style: dotted;
}

.sidelist-item {
    display: flex;
    font-size: .9em;
    padding: 0 var(--global-spacing-1-5x);
    border-bottom: 1px dashed var(--text-colour);
    gap: var(--global-spacing);
    align-items: baseline;
}

.sidelist-item-link {
    color: inherit;
    text-decoration: inherit;
}
.sidelist-item-link:hover,
.sidelist-item-link:focus {
    border-bottom-style: solid;
}
.sidelist-item-link:active {
    border-bottom-style: dotted;
}

.sidelist-item-icon {
    top: 1px;
    display: inline-block;
    font-weight: 700;
    font-size: var(--font-size);
    width: var(--font-size);
    line-height: var(--font-size);
    text-align: center;
    font-family: var(--font-cursive);
}
.sidelist-item-icon img {
    vertical-align: bottom;
}

.sidelist-item-label {
    display: inline-block;
}

.sidelist-empty {
    margin: var(--global-spacing-2x) auto;
}
.sidelist-empty-icon {
    display: inline-block;
    font-family: var(--font-cursive);
}
.sidelist-empty-label {
    display: inline-block;
}