/* ************************************************** */
/* #region GENERAL                                    */
/* ************************************************** */

* {
    scrollbar-width: none;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: 400;
    overflow: clip;
}

body {
    display: flex;
    flex-direction: column;
    opacity: 0;
}

body.fonts-loaded {
    opacity: 1;
    transition: opacity 0.15s ease;
}

body:has(.resizing) * {
    pointer-events: none !important;
}

pre {
    margin: 0;
    font-family: var(--font-family);
}

tool-group {
    display: flex;
    align-items: center;
    gap: 0.25em;
}   

.danger {
    color: red;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.error-message {
    color: red;
}

::placeholder {
    color: currentColor;
    opacity: 0.5;
}

/* #endregion */

/* ************************************************** */
/* #region LAYOUT                                     */
/* ************************************************** */

main-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 4px;
    position: relative;
    width: 100%;
}

/* #endregion */

/* ************************************************** */
/* #region INPUT - GENERAL                            */
/* ************************************************** */

input:focus-visible {
    outline: auto;
}

input[type="email"],
input[type="number"],
input[type="password"],
input[type="text"],
input[type="search"] {
    appearance: none;
    min-width: 0;
    height: 1.5em;
    padding-inline: 0.125em;
    background-color: transparent;
    border: 0;
    border-radius: 2px;
    font: var(--font-family);
    color: var(--text-color);
    text-overflow: ellipsis;
    text-transform: inherit;
    white-space: nowrap;
}

input[type="checkbox"],
input[type="radio"],
input[type="file"] {
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px;
    opacity: 0;
    z-index: 0;
}

/* Honeypot bot input */
input[name="website"] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
}

input:disabled {
    cursor: not-allowed;
}

/* #endregion */

/* ************************************************** */
/* #region INPUT - NUMBER                             */
/* ************************************************** */

input[type="number"] {
    width: calc(6ch + 1ch);
    text-align: right;
}

input[type="number"]:out-of-range {
    color: red;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

spin-buttons {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 100%;
    z-index: 2;
}

.spin-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    width: 100%;
    height: 50%;
    cursor: pointer;
}
.spin-button:hover {
    background-color: transparent;
}
.spin-button-up {
    top: 0;
    padding-top: 6px;
}
.spin-button-down {
    bottom: 0;
    padding-bottom: 6px;
}

/* #endregion */

/* ************************************************** */
/* #region INPUT - RANGE                              */
/* ************************************************** */

input[type="range"] {
    -webkit-appearance: none;

    --track-height: 1em;
    --thumb-height: var(--track-height);

    appearance: none;
    width: 100%;
    height: 100%;
    background: transparent; 
    border: none;
    border-radius: 0;
    cursor: pointer;
    z-index: 1;
}

input[type="range"].fill-range {
    overflow: hidden;
}

input[type="range"].discrete-range {
    overflow: visible;
}

/* ============= */
/* #region Track */
/* ============= */

input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
}

input[type="range"]::-moz-range-track {
    height: var(--track-height);
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* #endregion */

/* ============= */
/* #region Thumb */
/* ============= */

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: var(--thumb-height);
    margin-top: calc(var(--track-height) / 2 - var(--thumb-height) / 2);
}

input[type="range"].fill-range::-webkit-slider-thumb {
    width: 0;
}

input[type="range"].discrete-range::-webkit-slider-thumb {
    width: 0.5em;
    background: currentColor;
    border-radius: 0;
    box-shadow: 0 0 0 var(--border-width) var(--bg-color);
}

input[type="range"]::-moz-range-thumb {
    width: 0;
    height: var(--thumb-height);
    border-radius: 0;
    border: none;
}

input[type="range"].fill-range::-moz-range-thumb {
    background: var(--border-color);
}

/* #endregion */

/* ====================== */
/* #region Range progress */
/* ====================== */

input[type="range"].fill-range::-webkit-slider-thumb {
    box-shadow: -100vw 0 0 100vw currentColor;
}

input[type="range"]::-moz-range-progress {
    height: var(--track-height);
}

input[type="range"].fill-range::-moz-range-progress {
    background: var(--border-color);
}

/* #endregion */

/* #endregion */

/* ************************************************** */
/* #region INPUT - SEARCH                             */
/* ************************************************** */

input[type="search"] {
    width: 100%;
}

input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.clear-search-button {
    border: var(--border-width) solid transparent;
    opacity: 0;
}

.clear-search-button:hover {
    background-color: var(--bg-color-hover);
    border-color: var(--border-color);
    color: var(--text-color-hover);
    cursor: pointer;
}

input[type="search"]:not(:placeholder-shown) + .clear-search-button  {
    opacity: 1;
}

.clear-search-button [icon] {
    width: 1em;
    height: 1em;
}

.clear-search-button [icon] svg {
    width: 1.5em;
    height: 1.5em;
}

/* #endregion */

/* ************************************************** */
/* #region INPUT - COLOR                              */
/* ************************************************** */

input[type="color" i] {
    appearance: none;
    inline-size: 1em;
    block-size: 1em;
    padding: 0;
    border: none;
    border-radius: 1px;
    box-shadow: 0 0 0 1px currentColor;
    cursor: pointer;
}

input[type="color" i]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 1px;
}

input[type="color" i]::-webkit-color-swatch {
    border: 0;
    border-radius: 1px;
}

input[type="color" i]::-moz-color-swatch {
    border: 0;
    border-radius: 1px;
}

/* #endregion */

/* ************************************************** */
/* #region SELECT                                     */
/* ************************************************** */

select,
::picker(select) {
    appearance: base-select;
}

select:focus-visible {
    outline: auto;
}

select {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

select:hover {
    background-color: var(--bg-color-hover);
    border: var(--border-width) solid var(--border-color);
    color: var(--text-color-hover);
    cursor: pointer;
}

select:open,
select:hover:open {
    background-color: var(--bg-color-hover);
    border: var(--border-width) solid transparent;
    color: var(--text-color-hover);
}

select::picker-icon {
    display: none;
}

select:open::picker-icon {
    display: none;
}

select button::after {
    content: "⏷";
}

select button:disabled {
    opacity: 1;
}

select button:disabled::after {
    content: none;
}

selectedcontent {
    overflow: hidden;
    text-overflow: ellipsis;
}

::picker(select) {
    width: max-content;
    min-width: 120px;
    margin-top: var(--border-width);
    margin-left: calc(-1 * var(--border-width));
    padding: 0;
    background-color: var(--bg-color);
    border: 0;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--border-color);
    color: var(--text-color);

    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline, flip-inline flip-block;
}

::picker(select)::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bg-color);
    border: 0;
    border-radius: var(--border-radius);
    pointer-events: none;
    z-index: -1;
}

::picker(select)::after {
    content: "";
    position: absolute;
    top: var(--shadow-y);
    left: var(--shadow-x);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -2;

    /* ===== Linear Halftone ===== */
    background-image: radial-gradient(
        circle at center,
        var(--border-color) var(--dot-size),
        transparent calc(var(--dot-size) + 0px)
    );
    background-size: var(--dot-space) var(--dot-space);

    /* ===== Hex Halftone ===== */
    background-image:
        radial-gradient(circle at center, var(--border-color) var(--dot-size), transparent calc(var(--dot-size) + 0px)),
        radial-gradient(circle at center, var(--border-color) var(--dot-size), transparent calc(var(--dot-size) + 0px));
    background-size: var(--dot-space) var(--dot-space);
    /* Offset the second gradient by half the spacing */
    background-position:
        0 0,
        calc(var(--dot-space) / 2) calc(var(--dot-space) / 2);
}

optgroup {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 3px;
    border-bottom: var(--border-width) solid var(--border-color);
    overflow: auto;
}

optgroup:last-child {
    border-bottom: 0;
}

/* Hide optgroup if it doesn't container any options */
optgroup:not(:has(option)) {
    display: none;
}

option { /* basically a menu-item */
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    width: auto;
    padding-inline: 2px 24px;
    padding-block: 2px;
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
}

option:hover {
    background-color: var(--bg-color-hover);
    border: var(--border-width) solid var(--border-color);
    color: var(--text-color-hover);
}

option:focus-visible {
    outline: auto;
}

option::before {
    content: "( )";
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    font-family: "Iosevka Term";
}

option:checked::before {
    content: "(×)"
}

option::checkmark {
    display: none;
}

.select-option-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1ch;
    height: 24px;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

/* #endregion */

/* ************************************************** */
/* #region TEXTAREA                                   */
/* ************************************************** */

textarea {
    appearance: none;
    display: block;
    width: 100%;
    padding: 0.5em;
    background-color: transparent;
    border: 0;
    font: inherit;
    color: var(--text-color);
    line-height: 1.5;
    text-transform: inherit;
    resize: none;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

textarea:focus-visible {
    outline: none;
}

/* #endregion */

/* ************************************************** */
/* #region FIELD WRAPPER                              */
/* ************************************************** */

.field-wrapper-label {
    font-size: 0.875em;
}

.field-wrapper:has(input:disabled) .field-wrapper-label {
    opacity: 0.5;
    pointer-events: none;
}

/* #endregion */

/* ************************************************** */
/* #region INPUT CONTAINERS                           */
/* ************************************************** */

.input-container {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 0;
}

/* =================== */
/* #region Text inputs */
/* =================== */

/*
.text-input-container::before { content: "["; }
.text-input-container::after { content: "]"; } */

.text-input-container {
    flex: 1;
    padding: 0.125em;
    border: var(--border-width) solid var(--border-color);
    border-radius: 2px;
}

.text-input-container:focus-within {
    outline: auto;
}

.text-input-container:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.text-input-container input {
    flex: 1;
}

.text-input-container input:focus {
    outline: none;
}

/* #endregion */

/* ===================== */
/* #region Number inputs */
/* ===================== */

.number-input-container {
    width: fit-content;
    white-space: nowrap;
}

.number-input-container::before { content: "["; }
.number-input-container::after { content: "]"; }

/* #endregion */

/* ===================== */
/* #region Search inputs */
/* ===================== */

.search-input-container::before { content: "["; }
.search-input-container::after { content: "]"; }

/* #endregion */

/* ==================== */
/* #region Range inputs */
/* ==================== */

.range-input-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: fit-content;
    height: 1em;
}

.range-input-container:has(.fill-range) {
    box-shadow: inset 0 0 0 var(--border-width) currentColor;
}

.range-input-container:has(.discrete-range)::before {
    content: "";
    position: absolute;
    top: calc(50% - 0.125em / 2);
    left: 0;
    width: 100%;
    height: 0.125em;
    background-color: currentColor;
    pointer-events: none;
}

/* #endregion */

/* #endregion */

/* ************************************************** */
/* #region BUTTON                                     */
/* ************************************************** */

.buttons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25em;
}

button {
    appearance: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: var(--border-radius);
    color: currentColor;
    cursor: pointer;
    user-select: none;
}

button:disabled {
    opacity: 0.5;
    pointer-events: none;
}

button.hidden {
    display: none;
}

button:focus-visible {
    outline: auto;
}

button.link-style-button {
    display: inline-block;
    text-decoration: underline;
}

button.link-style-button:hover {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* #endregion */

/* ************************************************** */
/* #region LABEL                                      */
/* ************************************************** */

label {
    border-radius: var(--border-radius);
    user-select: none;
}

label:has(input[type="checkbox"]:focus-visible),
label:has(input[type="radio"]:focus-visible),
label:has(input[type="file"]:focus-visible) {
    outline: auto;
}

label:has(input:disabled) {
    opacity: 0.5;
    pointer-events: none;
}

/* #endregion */

/* ************************************************** */
/* #region DETAILS/SUMMARY                            */
/* ************************************************** */

/* wrap a details inside a <div class="details-wrapper" in order to place interactive tools absolutely over the <summary> element */
.details-wrapper {
    display: grid;
    grid-template-areas: "details";
    position: relative;
}

.details-tools {
    grid-area: details;
    justify-self: flex-end;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0.25em;
    width: fit-content;
    height: fit-content;
    padding-inline: 0 calc(0.5em + 0.125em);
    padding-block: 0.25em 0;
    color: var(--text-color-hover);
    z-index: 1;
}

.details-tool:hover {
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
}

details {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding-inline: 0.5em;
    padding-block: 0.125em;
}

details:last-child {
    border-bottom: none;
}

/* add grid-area to any details inside of a details-wrapper */
.details-wrapper > details {
    grid-area: details;
}

summary {
    display: flex;
    align-items: baseline;
    width: 100%;
    margin: 0;
    padding-inline: 0.5em;
    padding-block: 0.125em;
    background-color: color-mix(in srgb, var(--text-color) var(--summary-bg-mix-percentage), var(--bg-color));
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
    cursor: pointer;
    list-style: none;
    text-transform: uppercase;
    user-select: none;
    z-index: 1;
}

summary::before {
    content: ">";
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.5em;
    margin-right: 0.5em;
}

details:open > summary::before {
    transform: rotate(90deg)
}

.details-content {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    padding-inline: 0 0;
    padding-block: 0.5em 0.5em;
}

.details-content > .menu-item {
    padding-inline: 0.125em;
}

.details-content > .menu-item.range-item {
    padding-inline: 0.125em 0.5em;
}

.options-group {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

/* #endregion */

/* ************************************************** */
/* #region SUB-SECTION                                */
/* ************************************************** */

.sub-section {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    position: relative;
    width: 100%;
    margin-top: 0.25em;
    padding-block: 0.5em 0em;
    border-top: 1px solid var(--border-color);
}

.sub-section:empty {
    display:  none;
}

/* a sub-section placed directly after a checkbox-item/radio-item only shows while that input is checked */
/*
.checkbox-item:not(:has(input:checked)) + .sub-section,
.radio-item:not(:has(input:checked)) + .sub-section {
    display: none;
} */

/* #endregion */

/* ************************************************** */
/* #region REFRESH BUTTON                             */
/* ************************************************** */

.refresh-button {
    justify-content: center;
}

.refresh-button .svg-icon {
    animation: none;
}

.refresh-button.animating .svg-icon {
    animation: refresh 0.5s linear;
}

@keyframes refresh {
    from { transform: rotate(0);      }
    to   { transform: rotate(360deg); }
}

/* #endregion */

/* ************************************************** */
/* #region TAG                                        */
/* ************************************************** */

.add-tag-container.menu-item {
    padding: 0;
}

.tag-input {
    max-width: calc(15ch + 16px);
}

.add-tag-button {
    justify-content: center;
    height: 100%;
    aspect-ratio: 1;
}

.tag-label {
    cursor: default;
}

/* #endregion */

/* ************************************************** */
/* #region IFRAME                                     */
/* ************************************************** */

iframe {
    appearance: none;
    width: 100%;
    height: 100%;
    padding: calc(var(--border-width) / 2);
    border: none;
}

/* #endregion */

/* ************************************************** */
/* #region ICONS                                      */
/* ************************************************** */

[icon] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5em;
    height: 1.5em;
    overflow: hidden;
}

[icon] svg {
    flex-shrink: 0;
    width: 2em;
    height: 2em;
}

[icon] svg path,
[icon] svg circle,
[icon] svg line,
[icon] svg rect {
    stroke-width: var(--icon-stroke-width);
    vector-effect: non-scaling-stroke;
}

.alert-badge {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 0.5em;
    height: 0.5em;
    border-radius: 500vw;
    background-color: currentColor;
}

.alert-badge.active {
    display: block;
}

/* ----- OVERRIDES ----- */

#drawPath {
    vector-effect: initial;
    stroke-width: calc(1px * 24 / 32);
}

#font-size-big-a {
    stroke-width: 1.25px;
}

/* #endregion */

/* ************************************************** */
/* #region HALFTONE SHADOW                            */
/* ************************************************** */

.halftone-shadow {
    position: relative;
}

.halftone-shadow::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bg-color, transparent);
    border: 0;
    border-radius: var(--border-radius, 0);
    pointer-events: none;
    will-change: opacity;
    z-index: -1;
}

.halftone-shadow::after {
    content: "";
    position: absolute;
    top: var(--shadow-y, 0);
    left: var(--shadow-x, 0);
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: opacity;
    z-index: -2;

    /* Use CSS variable to toggle pattern type */
    background-image: var(--shadow-pattern,
        radial-gradient(
            circle at center,
            var(--border-color, black) var(--dot-size, 2px),
            transparent calc(var(--dot-size, 2px) + 0px)
        )
    );
    background-size: var(--dot-space, 8px) var(--dot-space, 8px);

    /* Only apply double positioning if hex pattern is used */
    background-position: var(--shadow-position, 0 0);
}

/* Optional: hex pattern variant */
.halftone-shadow.hex::after {
    --shadow-pattern:
        radial-gradient(circle at center, var(--border-color, black) var(--dot-size, 2px), transparent calc(var(--dot-size, 2px) + 0px)),
        radial-gradient(circle at center, var(--border-color, black) var(--dot-size, 2px), transparent calc(var(--dot-size, 2px) + 0px));
    --shadow-position: 0 0, calc(var(--dot-space, 8px) / 2) calc(var(--dot-space, 8px) / 2);
}

/* #endregion */


.loading-braille-word {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-braille-char {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.loading-braille-char[data-noisy] {
    opacity: 1;  /* dims the noise burst relative to the resolved chars */
}

/* ************************************************** */
/* #region CHIPS                                      */
/* ************************************************** */

.chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
}

.chips-container::before {
    box-sizing: content-box;
    align-content: center;
    height: 1.5em;
    margin-block: 0.125em;
    border-top: var(--border-width) solid transparent;
    border-bottom: var(--border-width) solid transparent;
    font-style: italic;
}

.chips-container:has(.chip)::before {
    content: none !important;
}

.chip {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 3ch;
    width: fit-content;
    padding-inline: 0.25em 0.125em;
    padding-block: 0.125em;
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--border-color);
    overflow: hidden;
    user-select: none;
}

.chip-label-icon {
    width: max(3ch, 1.5em);
    margin-right: 0.25em;
}

.chip-label {
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delete-chip-button {
    margin-left: 0.25em;
    opacity: 0;
}

.delete-chip-button:hover {
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
}

.chip:hover > .delete-chip-button {
    opacity: 1;
}

/* #endregion */

/* ************************************************** */
/* #region KBD                                        */
/* ************************************************** */

kbd {
    display: inline-block;
    min-width: 2ch;
    padding-inline: 0.25ch;
    border-radius: calc(1 * var(--border-radius));
    box-shadow: 0 0 0 calc(0.5 * var(--border-width)) var(--text-color), 0 0.125em 0 calc(0.5 * var(--border-width)) var(--text-color);
    line-height: normal;
    text-align: center;
}

kbd:hover {
    transform: translate(0, calc(0.125em - 0px));
    box-shadow: 0 0 0 calc(0.5 * var(--border-width)) var(--text-color), 0 0px 0 calc(0.5 * var(--border-width)) var(--text-color);
}

/* #endregion */