$accent:         scale-color(#e8ad58, $lightness: 30%);
$background:     hsl(210, 14%, 9%);
$text:           mix(hsl(210, 60%, 95%), $background, 85%);
$text-minus:     mix(hsl(210, 100%, 95%), $background, 60%);
//$text-faint:     mix(hsl(210, 100%, 95%), $background, 35%);
$text-plus:      #fff;
$link-idle:      $text-plus;
$link-visited:   $text;
$border:         mix(hsl(210, 100%, 95%), $background, 16%);
$sel-background: rgba($accent, .996);
$sel-text:       #000;

$font-monospace:    'Iosevka Term SS03', 'IBM Plex Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Droid Sans Mono', Monaco, Consolas, Courier, monospace;
$font-proportional: 'Open Sans', 'Fira Sans', 'Roboto', 'Droid Sans', sans-serif;

//
// Basic element styles

body {
    margin:           0;
    padding:          0;
    background-color: $background;
    // background-image: repeating-linear-gradient(
    //     rgba(0, 0, 0, .25),
    //     rgba(0, 0, 0, .25)         1px,
    //     hsla(210, 100%, 95%, .025) 1px,
    //     hsla(210, 100%, 95%, .025) 2px
    // );
    color:            $text;
    font-family:      $font-monospace;
    font-size:        1 / 16 * 17em;
    line-height:      1.5;
}

pre {
    margin:      0;
    font:        inherit;
    font-family: $font-monospace;
    white-space: pre-wrap;
}

h1, h2, h3, h4, h5, h6 {
    font:        inherit;
    font-weight: bold;
    color:       $text-plus;
    margin:      0;
}

p {
    margin: 0;
}

ul, ol {
    margin:          0;
    padding:         0;
    list-style-type: none;
}

ul {
    li {
        padding-left: 3ch;
        padding-left: 1.5em;

        &::before {
            display:      inline-block;
            width:        3ch;
            width:        1.5em;
            margin-left:  -3ch;
            margin-left:  -1.5em;
            content:      '–';
        }
    }
}

button {
    background:      none;
    border:          0;
    padding:         0;
    color:           $text-plus;
    font:            inherit;
    text-decoration: underline;
    cursor:          pointer;

    &:focus {
        outline: 1px dotted currentColor;
    }
}

img {
    display:        inline-block;
    vertical-align: top;
    max-width:      8em;
    margin:         .1em 0;

    &::selection {
        background-color: rgba($sel-background, .35);
    }

    &.expanded {
        max-width: 40em;
        max-width: 80ch;
    }

    &.faded {
        opacity: .5;
    }
}

strong {
    font-weight: normal;
}

::selection {
    color:            $sel-text;
    background-color: $sel-background;
}

:link {
    color: $link-idle;
}

:visited {
    color: $link-visited;
}

:link,
:visited {
    &:hover {
        color: $text-plus;
    }
}

//
// Template classes

.header-base {
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: space-between;
    border-bottom:   1px solid $border;
}

//
// Header

.header {
    padding: .9em 1em;
    color:   $text-minus;
}

//
// Location component

.location {
    flex:          0 1 auto;
    overflow:      hidden;
    white-space:   nowrap;
    text-overflow: ellipsis;
    text-overflow: ellipsis '|';
    margin-right:  .5em;

    &__prefix {
        margin-right:    .3em;
        color:           $text-minus;
        cursor:          pointer;
        text-decoration: underline;

        @media (hover: hover) {
            &:hover {
                color: $text-plus;
            }
        }

        &--mobile {
            display: none;
        }
    }

    &__slash {
        margin: 0 .3em;
    }

    &__uripart {
        color: $text-plus;
    
        + .location__slash + .location__uripart {
            color: $text;
        }

        &:link,
        &:visited {
            &:hover {
                color: $text-plus;
            }
        }
    }
}

//
// Actions component

.actions {
    flex: 0 0 auto;

    :visited {
        color: $link-idle;
    }
}

.action {
    display: inline;

    & + & {
        &::before {
            content: ' | '
        }
    }
}

//
// Site content classes

.wrap {
    padding:    2em 1em;
    text-align: center;

    &--word-wrap {
        max-width: 45em;
        max-width: 90ch;
        margin:    0 auto;
    }
}

.content {
    box-sizing:   border-box;
    display:      inline-block;
    min-width:    0;
    max-width:    100%;
    margin:       0;
    padding:      0;
    text-align:   left;
    font:         inherit;
    font-family:  $font-proportional;

    &--monospace,
    &--prefer-monospace {
        font-family: $font-monospace;
    }
}

.section {
    display:         flex;
    align-items:     baseline;
    flex-direction:  row;
    justify-content: flex-start;
    min-height:      1em * 1.5;
    padding-left:    3em;
    padding-left:    5ch;

    &__type {
        flex:          0 0 auto;
        margin-left:   -3em;
        margin-left:   -5ch;
        width:         3em;
        width:         5ch;
        color:         $text-minus;
        font-family:   $font-monospace;
        user-select:   none;
        white-space:   pre;
    }

    &__content {
        min-width: 0;
        word-wrap: break-word;
    }

    .is-plain & {
        padding-left: 0;

        &__type {
            display: none;
        }
    }
}

//
// Modal component

.modal {
    position:         fixed;
    top:              0;
    left:             0;
    z-index:          100;
    display:          none;
    width:            100%;
    height:           100%;
    box-sizing:       border-box;
    padding:          2em;
    background-color: rgba(#000, .75);

    &--visible {
        display: block;
    }

    &__content {
        max-width:        30em;
        padding:          1.5em 1.8em;
        margin:           0 auto;
        background-color: $background;
        box-shadow:       0 .3em 2em #000;
        text-align:       left;
    }
    
    &__head {
        padding-bottom: .75em;
        margin-bottom:  1.5em;
    }
    
    &__title {
        padding-right:  1em;
        white-space:    nowrap;
        text-overflow:  ellipsis;
        overflow:       hidden;
        text-transform: uppercase;
    }
}

//
// Setting component

.setting {
    display:         flex;
    flex-direction:  row;
    align-items:     baseline;
    justify-content: space-between;

    &::after {
        order:         2;
        flex:          1 1 auto;
        display:       block;
        height:        0;
        margin:        0 .5em;
        border-bottom: 2px dotted $border;
        content:       '';
    }

    &__label {
        order: 1;
    }

    &__value {
        order: 3;
    }
}

//
// Viewport adaptation

@media screen and (max-width: 800px) {
    body {
        font-size: 1em;
    }

    .modal {
        padding: 1em;
    }

    .modal__content {
        padding: 1em 1.3em;
    }
}

@media screen and (max-width: 500px) {
    .location__prefix {
        display: none;

        &--mobile {
            display: inline;
        }
    }

    .action {
        display: block;

        & + & {
            &::before {
                content: '';
            }
        }
    }
}

@media screen and (max-width: 280px) {
    .location__prefix--mobile {
        display: none;
    }
}