/* Import all CSS modules */
@import url('./variables.css');
@import url('./forms.css');
@import url('./windows.css');
@import url('./desktop-icons.css');
@import url('./menubar.css');
@import url('./taskbar.css');
@import url('./responsive.css');

/* Base HTML and Global Styles */
html {
    height: 100%;
    background: linear-gradient(var(--desktop-bg-start), var(--desktop-bg-end));
    font-family: var(--base-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0px,
            rgba(0, 0, 0, 0) 2px,
            rgba(0, 0, 0, 0.1) 3px);
    z-index: 5;
}

::selection {
    background-color: rgba(255, 255, 150, 0.4);
    color: inherit;
}

.highlight {
    background: var(--highlight-color);
    padding: 0.1em 0.1em;
}

.multiline {
    white-space: pre-wrap;
}

.title-bar,
.window,
button,
input,
label,
legend,
li[role=tab],
option,
select,
table,
textarea,
ul.tree-view {
    font-size: 14px
}

h1 {
    font-size: 6rem
}

h2 {
    font-size: 3.5rem
}

h3 {
    font-size: 2.5rem
}

h4 {
    font-size: 2rem
}

u {
    border-bottom: .5px solid #222;
    text-decoration: none
}

a {
    color: #00f
}

a:focus {
    outline: 1px dotted #00f
}

summary:focus {
    outline: 1px dotted #000
}

.sunken-panel {
    border: 2px groove transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2;
    box-sizing: border-box;
    overflow: auto
}

.sunken-panel,
table {
    background-color: #fff
}

table {
    border-collapse: collapse;
    position: relative;
    text-align: left;
    white-space: nowrap
}

table>thead>tr>* {
    background: silver;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
    box-sizing: border-box;
    font-weight: 400;
    height: 17px;
    padding: 0 6px;
    position: sticky;
    top: 0
}

table.interactive>tbody>tr {
    cursor: pointer
}

table>tbody>tr.highlighted {
    background-color: navy;
    color: #fff
}

table>tbody>tr>* {
    height: 14px;
    padding: 0 6px
}

.progress-indicator {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    box-shadow: inset -2px -2px #dfdfdf, inset 2px 2px grey;
    box-sizing: border-box;
    height: 32px;
    padding: 4px;
    position: relative
}

.progress-indicator>.progress-indicator-bar {
    background-color: navy;
    display: block;
    height: 100%
}

.progress-indicator.segmented>.progress-indicator-bar {
    background-color: transparent;
    background-image: linear-gradient(90deg, navy 16px, transparent 0 2px);
    background-repeat: repeat;
    background-size: 18px 100%;
    width: 100%
}

.field-border {
    background: #fff
}

.field-border,
.field-border-disabled {
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    padding: 2px
}

.field-border-disabled {
    background: silver
}

.status-field-border {
    background: silver;
    box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px grey;
    padding: 1px
}

.media-scroll-container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #797979;
    padding: 5px;
}

ul.tree-view {
    background: #fff;
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    display: block;
    margin: 0;
    padding: 6px
}

ul.tree-view li {
    list-style-type: none
}

ul.tree-view a {
    color: #000;
    text-decoration: none
}

ul.tree-view a:focus {
    background-color: navy;
    color: #fff
}

ul.tree-view li,
ul.tree-view ul {
    margin-top: 3px
}

ul.tree-view ul {
    border-left: 1px dotted grey;
    margin-left: 16px;
    padding-left: 16px
}

ul.tree-view ul>li {
    position: relative
}

ul.tree-view ul>li:before {
    border-bottom: 1px dotted grey;
    content: "";
    display: block;
    left: -16px;
    position: absolute;
    top: 6px;
    width: 12px
}

ul.tree-view ul>li:last-child:after {
    background: #fff;
    bottom: 0;
    content: "";
    display: block;
    left: -20px;
    position: absolute;
    top: 7px;
    width: 8px
}

ul.tree-view details {
    margin-top: 0
}

ul.tree-view details[open] summary {
    margin-bottom: 0
}

ul.tree-view ul details>summary:before {
    margin-left: -22px;
    position: relative;
    z-index: 1
}

ul.tree-view details>summary:before {
    background-color: #fff;
    border: 1px solid grey;
    content: "+";
    display: block;
    float: left;
    height: 9px;
    line-height: 8px;
    margin-right: 5px;
    padding-left: 1px;
    text-align: center;
    width: 8px
}

ul.tree-view details[open]>summary:before {
    content: "-"
}

ul.tree-view details>summary::-webkit-details-marker,
ul.tree-view details>summary::marker {
    content: ""
}

pre {
    background: #fff;
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    display: block;
    margin: 0;
    padding: 12px 8px
}

code,
code * {
    font-family: monospace
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 16px
}

::-webkit-scrollbar:horizontal {
    height: 17px
}

::-webkit-scrollbar-corner {
    background: #dfdfdf
}

::-webkit-scrollbar-track {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-thumb {
    background-color: #dfdfdf;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf
}

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

::-webkit-scrollbar-button:vertical:start {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E");
    height: 17px
}

::-webkit-scrollbar-button:vertical:end {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");
    height: 17px
}

::-webkit-scrollbar-button:horizontal:start {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E");
    width: 16px
}

::-webkit-scrollbar-button:horizontal:end {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E");
    width: 16px
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .desktop-icon img,
    .title-bar-controls button {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
    }
}