$color-1 = #222
$color-2 = #c0c0c0
$color-3 = #000
$color-4 = #fff
$color-5 = #808080

$surface=#c0c0c0;
$button-highlight=#ffffff;
$button-face=#dfdfdf;
$button-shadow=#808080;
$window-frame=#0a0a0a;
$dialog-blue=#000080;
$dialog-blue-light=#1084d0;
$dialog-gray=#808080;
$dialog-gray-light=#b5b5b5;
$link-blue=#0000ff;

/* Spacing */
$element-spacing=8px;
$grouped-button-spacing=4px;
$grouped-element-spacing=6px;
$radio-width=12px;
$checkbox-width=13px;
$radio-label-spacing=6px;
$range-track-height=4px;
$range-spacing=10px;

/* Some detailed computations for radio buttons and checkboxes */
$radio-total-width-precalc=$radio-width + $radio-label-spacing;
$radio-total-width=calc($radio-total-width-precalc);
$radio-left=calc(-1 * $radio-total-width-precalc);
$radio-dot-width=4px;
$radio-dot-top=calc($radio-width / 2 - $radio-dot-width / 2);
$radio-dot-left=calc(-1 * ($radio-total-width-precalc) + $radio-width / 2 - $radio-dot-width / 2);
$checkbox-total-width-precalc=$checkbox-width +$radio-label-spacing;
$checkbox-total-width=calc($checkbox-total-width-precalc);
$checkbox-left=calc(-1 * $checkbox-total-width-precalc);
$checkmark-width=7px;
$checkmark-top=3px;
$checkmark-left=3px;

/* Borders */
$border-width=1px;
$border-raised-outer=inset -1px -1px $window-frame, inset 1px 1px $button-highlight;
$border-raised-inner=inset -2px -2px $button-shadow, inset 2px 2px $button-face;
$border-sunken-outer=inset -1px -1px $button-highlight, inset 1px 1px $window-frame;
$border-sunken-inner=inset -2px -2px $button-face, inset 2px 2px $button-shadow;

/* Window borders flip button-face and button-highlight */
$border-window-outer=inset -1px -1px $window-frame, inset 1px 1px $button-face;
$border-window-inner=inset -2px -2px $button-shadow, inset 2px 2px $button-highlight;

/* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
$border-field=inset -1px -1px $button-highlight, inset 1px 1px $button-shadow, inset -2px -2px $button-face, inset 2px 2px $window-frame;

input[type="radio"],
input[type="checkbox"]
  -webkit-appearance: none
  -moz-appearance: none
  appearance: none
  border: none
  margin: 0
  background: 0
  opacity: 0
  position: fixed

@font-face
    font-family "Pixelated MS Sans Serif"
    src url("98.css/fonts/converted/ms_sans_serif.woff") format("woff")
    src url("98.css/fonts/converted/ms_sans_serif.woff2") format("woff2")
    font-weight normal
    font-style normal

@font-face
    font-family "Pixelated MS Sans Serif"
    src url("98.css/fonts/converted/ms_sans_serif_bold.woff") format("woff")
    src url("98.css/fonts/converted/ms_sans_serif_bold.woff2") format("woff2")
    font-weight bold
    font-style normal

body
    font-family Arial
    color $color-1

button
label
input
textarea
select
option
ul.tree-view
.window
.help-text
    font-family "Pixelated MS Sans Serif", Arial
    font-smoothing none

u
    text-decoration none
    border-bottom 0.5px solid $color-1

.vertical-bar
    width 4px
    height 20px
    background $color-2
    box-shadow var($border-raised-outer), var($border-raised-inner)

button
    &:not(:disabled)
        &:hover
            box-shadow var($border-sunken-outer), var($border-sunken-inner)

button
    &:focus
        outline 1px dotted #000000
        outline-offset -4px

button::-moz-focus-inner
    border 0

:disabled
:disabled+label
    color var($button-shadow)
    text-shadow 1px 1px 0 var($button-highlight)

.window
    box-shadow var($border-window-outer), var($border-window-inner)
    background var($surface)
    padding 3px

.title-bar-controls
    display flex

    button
        padding 0
        display block
        min-width 16px
        min-height 14px

        &:active
            padding 0

        &:focus
            outline none

    button[aria-label="Minimize"]
        background-image svg-load("98.css/icon/minimize.svg")
        background-repeat no-repeat
        background-position bottom 3px left 4px

    button[aria-label="Maximize"]
        background-image svg-load("98.css/icon/maximize.svg")
        background-repeat no-repeat
        background-position top 2px left 3px

    button[aria-label="Restore"]
        background-image svg-load("98.css/icon/restore.svg")
        background-repeat no-repeat
        background-position top 2px left 3px

    button[aria-label="Help"]
        background-image svg-load("98.css/icon/help.svg")
        background-repeat no-repeat
        background-position top 2px left 5px

    button[aria-label="Close"]
        margin-left 2px
        background-image svg-load("98.css/icon/close.svg")
        background-repeat no-repeat
        background-position top 3px left 4px

.window-body
    margin var($element-spacing)

fieldset
    border none
    box-shadow var($border-sunken-outer), var($border-raised-inner)
    padding calc(2 * var($border-width) + var($element-spacing))
    padding-block-start var($element-spacing)
    margin 0

legend
    background var($surface)

.field-row
    display flex
    align-items center

    >*
        +*
            margin-left var($grouped-element-spacing)

[class^="field-row"]
    +[class^="field-row"]
        margin-top var($grouped-element-spacing)

.field-row-stacked
    display flex
    flex-direction column

    *
        +*
            margin-top var($grouped-element-spacing)

input[type="radio"]+label
input[type="checkbox"]+label
    line-height 13px

input[type="radio"]
    +label
        position relative
        margin-left var($radio-total-width)

    +label::before
        content ""
        position absolute
        top 0
        left calc(-1 * (var($radio-total-width-precalc)))
        display inline-block
        width var($radio-width)
        height var($radio-width)
        margin-right var($radio-label-spacing)
        background svg-load("98.css/icon/radio-border.svg")

input[type="radio"]:active
    +label::before
        background svg-load("98.css/icon/radio-border-disabled.svg")

input[type="radio"]:checked
    +label::after
        content ""
        display block
        width var($radio-dot-width)
        height var($radio-dot-width)
        top var($radio-dot-top)
        left var($radio-dot-left)
        position absolute
        background svg-load("98.css/icon/radio-dot.svg")

input[type="radio"]:focus+label
input[type="checkbox"]:focus+label
    outline 1px dotted #000000

input[type="radio"][disabled]
    +label::before
        background svg-load("98.css/icon/radio-border-disabled.svg")

input[type="radio"][disabled]:checked
    +label::after
        background svg-load("98.css/icon/radio-dot-disabled.svg")

input[type="checkbox"]
    +label
        position relative
        margin-left var($checkbox-total-width)

    +label::before
        content ""
        position absolute
        left calc(-1 * (var($checkbox-total-width-precalc)))
        display inline-block
        width var($checkbox-width)
        height var($checkbox-width)
        background var($button-highlight)
        box-shadow var($border-field)
        margin-right var($radio-label-spacing)

input[type="checkbox"]:active
    +label::before
        background var($surface)

input[type="checkbox"]:checked
    +label::after
        content ""
        display block
        width var($checkmark-width)
        height var($checkmark-width)
        position absolute
        top var($checkmark-top)
        left calc(-1 * (var($checkbox-total-width-precalc)) + var($checkmark-left))
        background svg-load("98.css/icon/checkmark.svg")

input[type="checkbox"][disabled]
    +label::before
        background var($surface)

input[type="checkbox"][disabled]:checked
    +label::after
        background svg-load("98.css/icon/checkmark-disabled.svg")

input[type="text"]
input[type="password"]
input[type="email"]
select
textarea
    padding 3px 4px
    border none
    box-shadow var($border-field)
    background-color var($button-highlight)
    box-sizing border-box
    appearance none
    border-radius 0

select
    appearance none
    position relative
    padding-right 32px
    background-image svg-load("98.css/icon/button-down.svg")
    background-position top 2px right 2px
    background-repeat no-repeat
    border-radius 0

    &:focus
        color var($button-highlight)
        background-color var($dialog-blue)

        option
            color $color-3
            background-color $color-4

    &:active
        background-image svg-load("98.css/icon/button-down-active.svg")

select:focus
input[type="text"]:focus
input[type="password"]:focus
input[type="email"]:focus
textarea:focus
    outline none

input[type="range"]
    appearance none
    width 100%
    background transparent

input[type="range"]:focus
    outline none

input[type="range"]::-webkit-slider-thumb
    appearance none
    height 21px
    width 11px
    background svg-load("98.css/icon/indicator-horizontal.svg")
    transform translateY(-8px)

input[type="range"].has-box-indicator::-webkit-slider-thumb
    background svg-load("98.css/icon/indicator-rectangle-horizontal.svg")
    transform translateY(-10px)

input[type="range"]::-moz-range-thumb
    height 21px
    width 11px
    border 0
    border-radius 0
    background svg-load("98.css/icon/indicator-horizontal.svg")
    transform translateY(2px)

input[type="range"].has-box-indicator::-moz-range-thumb
    background svg-load("98.css/icon/indicator-rectangle-horizontal.svg")
    transform translateY(0px)

input[type="range"]::-webkit-slider-runnable-track
    width 100%
    background black
    border-right 1px solid grey
    border-bottom 1px solid grey
    box-shadow 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
        -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey

input[type="range"]::-moz-range-track
    width 100%
    background black
    border-right 1px solid grey
    border-bottom 1px solid grey
    box-shadow 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey,
        -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey

.is-vertical
    display inline-block
    width 4px
    height 150px
    transform translateY(50%)

    >input[type="range"]
        width 150px
        height 4px
        margin 0 calc(var($grouped-element-spacing) + var($range-spacing)) 0 var($range-spacing)
        transform-origin left
        transform rotate(270deg) translateX(calc(-50% + var($element-spacing)))

    >input[type="range"]::-webkit-slider-runnable-track
        border-left 1px solid grey
        border-right 0
        border-bottom 1px solid grey
        box-shadow -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
        1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey

    >input[type="range"]::-moz-range-track
        border-left 1px solid grey
        border-right 0
        border-bottom 1px solid grey
        box-shadow -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey,
        1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey

    >input[type="range"]::-webkit-slider-thumb
        transform translateY(-8px) scaleX(-1)

    >input[type="range"].has-box-indicator::-webkit-slider-thumb
        transform translateY(-10px) scaleX(-1)

    >input[type="range"]::-moz-range-thumb
        transform translateY(2px) scaleX(-1)

    >input[type="range"].has-box-indicator::-moz-range-thumb
        transform translateY(0px) scaleX(-1)

a
    &:focus
        outline 1px dotted var($link-blue)

ul
    &.tree-view
        display block
        background var($button-highlight)
        box-shadow var($border-field)
        padding 6px
        margin 0

        li
            list-style-type none

        a
            text-decoration none
            color $color-3

            &:focus
                background-color var($dialog-blue)
                color var($button-highlight)

        ul
            margin-left 16px
            padding-left 16px
            border-left 1px dotted $color-5

            >li
                position relative

            >li::before
                content ""
                display block
                position absolute
                left -16px
                top 6px
                width 12px
                border-bottom 1px dotted $color-5

            >li::after
                &:last-child
                    content ""
                    display block
                    position absolute
                    left -20px
                    top 7px
                    bottom 0px
                    width 8px
                    background var($button-highlight)

            details
                >summary
                    &:before
                        margin-left -22px
                        position relative
                        z-index 1

        details
            margin-top 0

            >summary
                &:before
                    text-align center
                    display block
                    float left
                    content "+"
                    border 1px solid $color-5
                    width 8px
                    height 9px
                    line-height 8px
                    margin-right 5px
                    padding-left 1px
                    background-color $color-4

        details[open]
            summary
                margin-bottom 0

            >summary
                &:before
                    content "-"

ul.tree-view ul
ul.tree-view li
    margin-top 3px

pre
    background var($button-highlight)
    box-shadow var($border-field)

summary
    &:focus
        outline 1px dotted #000000

::-webkit-scrollbar
    width 16px

::-webkit-scrollbar:horizontal
    height 17px

::-webkit-scrollbar-corner
    background var($button-face)

::-webkit-scrollbar-track
    background-image svg-load("98.css/icon/scrollbar-background.svg")

::-webkit-scrollbar-thumb
    background-color var($button-face)
    box-shadow var($border-raised-outer), var($border-raised-inner)

::-webkit-scrollbar-button:horizontal:start:decrement
::-webkit-scrollbar-button:horizontal:end:increment
::-webkit-scrollbar-button:vertical:start:decrement
::-webkit-scrollbar-button:vertical:end:increment
    display block

::-webkit-scrollbar-button:vertical:start
    height 17px
    background-image svg-load("98.css/icon/button-up.svg")

::-webkit-scrollbar-button:vertical:end
    height 17px
    background-image svg-load("98.css/icon/button-down.svg")

::-webkit-scrollbar-button:horizontal:start
    width 16px
    background-image svg-load("98.css/icon/button-left.svg")

::-webkit-scrollbar-button:horizontal:end
    width 16px
    background-image svg-load("98.css/icon/button-right.svg")