.footer {

margin: $spacing-2;
padding: $spacing-3;
border-radius: $spacing-2;

font-size: $small-font-size;
text-align: center;
@include with-theme {
    background-color: color-for(hl-area);
    color: color-for(hl);
}

}

.footer-container {

margin: auto;
@include on-desktop {
    max-width: 50%;
}
@include on-tablet {
    max-width: 75%;
}

}

@mixin footer-section {

margin: $spacing-1 0pt;

}

.site-description {

@include footer-section;
text-align: justify;

}

.social-bar {

@include footer-section;

}

.copyright {

@include footer-section;
font-style: italic;

}

.social-link {

// Sizing and spacing
margin: $spacing-1;

// Sizing is scaled by font
$font-size: $medium-font-size;

// Manually set width and height
width: $font-size + 2*$spacing-1;
height: $font-size + 2*$spacing-1;
border-radius: $font-size;

// Center icon
display: inline-grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
place-items: center;

// Style icon
font-size: $font-size;
text-decoration: none;
color: inherit !important;

}

.colormode-set {

// Vertical alignment
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;

// Sizing and spacing
font-size: $normal-font-size;
padding: $spacing-1 $spacing-2;

// Border
@include with-theme {
    border: 1px solid color-for(text);
    border-radius: $spacing-1;
}

// Subcomponents
> .colormode-icon {
    margin-right: $spacing-1;
}
#colormode-selector {
    background: transparent;
    border: none;
    @include with-theme {
        color: color-for(text);
    }
}

}