:root {
    --color-confidence-extremely-high: #3e7726; /*#297f29;*/
    --color-confidence-very-high: #5e861f; /*#68ae28;*/ /*#72b028;*/
    --color-confidence-high: #798514; /*#9daa1a;*/ /*#aaa51a;*/
    --color-confidence-medium: #91830c; /*#9c810d;*/ /*#a4660d;*/
    --color-confidence-low: #c58a04; /*#b37304;*/ /*#c32104;*/
    --color-confidence-0: hsl(104.00, 95.90%, 29.00%);
    --color-confidence-1: hsl(102.49, 95.34%, 29.46%);
    --color-confidence-2: hsl(100.98, 94.79%, 29.90%);
    --color-confidence-3: hsl(99.47, 94.23%, 30.33%);
    --color-confidence-4: hsl(97.98, 93.67%, 30.74%);
    --color-confidence-5: hsl(96.49, 93.12%, 31.14%);
    --color-confidence-6: hsl(95.01, 92.56%, 31.52%);
    --color-confidence-7: hsl(93.53, 92.01%, 31.89%);
    --color-confidence-8: hsl(92.06, 91.45%, 32.24%);
    --color-confidence-9: hsl(90.60, 90.89%, 32.58%);
    --color-confidence-10: hsl(89.14, 90.34%, 32.91%);
    --color-confidence-11: hsl(87.69, 89.78%, 33.22%);
    --color-confidence-12: hsl(86.25, 89.22%, 33.52%);
    --color-confidence-13: hsl(84.81, 88.67%, 33.81%);
    --color-confidence-14: hsl(83.38, 88.11%, 34.08%);
    --color-confidence-15: hsl(81.96, 87.56%, 34.34%);
    --color-confidence-16: hsl(80.54, 87.00%, 34.59%);
    --color-confidence-17: hsl(79.14, 86.44%, 34.83%);
    --color-confidence-18: hsl(77.73, 85.89%, 35.05%);
    --color-confidence-19: hsl(76.34, 85.33%, 35.26%);
    --color-confidence-20: hsl(74.95, 84.78%, 35.46%);
    --color-confidence-21: hsl(73.57, 84.22%, 35.65%);
    --color-confidence-22: hsl(72.20, 83.66%, 35.82%);
    --color-confidence-23: hsl(70.84, 83.11%, 35.98%);
    --color-confidence-24: hsl(69.49, 82.55%, 36.13%);
    --color-confidence-25: hsl(68.14, 81.99%, 36.27%);
    --color-confidence-26: hsl(66.81, 81.44%, 36.40%);
    --color-confidence-27: hsl(65.49, 80.88%, 36.51%);
    --color-confidence-28: hsl(64.17, 80.33%, 36.61%);
    --color-confidence-29: hsl(62.87, 79.77%, 36.70%);
    --color-confidence-30: hsl(61.58, 79.21%, 36.78%);
    --color-confidence-31: hsl(60.30, 78.66%, 36.85%);
    --color-confidence-32: hsl(59.04, 78.10%, 36.90%);
    --color-confidence-33: hsl(57.78, 77.54%, 36.95%);
    --color-confidence-34: hsl(56.55, 76.99%, 36.98%);
    --color-confidence-35: hsl(55.32, 76.43%, 37.00%);
    --color-confidence-36: hsl(54.11, 75.87%, 37.01%);
    --color-confidence-37: hsl(52.92, 75.32%, 37.02%);
    --color-confidence-38: hsl(51.74, 74.76%, 37.01%);
    --color-confidence-39: hsl(50.58, 74.21%, 36.99%);
    --color-confidence-40: hsl(49.43, 73.65%, 36.96%);
    --color-confidence-41: hsl(48.31, 73.09%, 36.92%);
    --color-confidence-42: hsl(47.20, 72.54%, 36.88%);
    --color-confidence-43: hsl(46.11, 71.98%, 36.83%);
    --color-confidence-44: hsl(45.04, 71.43%, 36.77%);
    --color-confidence-45: hsl(44.00, 70.87%, 36.70%);
    --color-confidence-46: hsl(42.97, 70.31%, 36.62%);
    --color-confidence-47: hsl(41.96, 69.76%, 36.54%);
    --color-confidence-48: hsl(40.98, 69.20%, 36.45%);
    --color-confidence-49: hsl(40.02, 68.64%, 36.36%);
    --color-confidence-50: hsl(39.08, 68.09%, 36.26%);
    --color-confidence-51: hsl(38.16, 67.53%, 36.16%);
    --color-confidence-52: hsl(37.27, 66.97%, 36.06%);
    --color-confidence-53: hsl(36.40, 66.42%, 35.95%);
    --color-confidence-54: hsl(35.56, 65.86%, 35.84%);
    --color-confidence-55: hsl(34.74, 65.31%, 35.73%);
    --color-confidence-56: hsl(33.95, 64.75%, 35.62%);
    --color-confidence-57: hsl(33.19, 64.19%, 35.50%);
    --color-confidence-58: hsl(32.45, 63.64%, 35.39%);
    --color-confidence-59: hsl(31.74, 63.08%, 35.28%);
    --color-confidence-60: hsl(31.06, 62.52%, 35.17%);
    --color-confidence-61: hsl(30.41, 61.97%, 35.06%);
    --color-confidence-62: hsl(29.78, 61.41%, 34.95%);
    --color-confidence-63: hsl(29.18, 60.86%, 34.85%);
    --color-confidence-64: hsl(28.62, 60.30%, 34.75%);
    --color-confidence-65: hsl(28.08, 59.74%, 34.65%);
    --color-confidence-66: hsl(27.57, 59.19%, 34.56%);
    --color-confidence-67: hsl(27.10, 58.63%, 34.47%);
    --color-confidence-68: hsl(26.66, 58.07%, 34.39%);
    --color-confidence-69: hsl(26.25, 57.52%, 34.31%);
    --color-confidence-70: hsl(25.87, 56.96%, 34.24%);
    --color-confidence-71: hsl(25.52, 56.41%, 34.17%);
    --color-confidence-72: hsl(25.21, 55.85%, 34.12%);
    --color-confidence-73: hsl(24.93, 55.29%, 34.06%);
    --color-confidence-74: hsl(24.69, 54.74%, 34.02%);
    --color-confidence-75: hsl(24.48, 54.18%, 33.98%);
    --color-confidence-76: hsl(24.31, 53.63%, 33.95%);
    --color-confidence-77: hsl(24.18, 53.07%, 33.93%);
    --color-confidence-78: hsl(24.08, 52.51%, 33.91%);
    --color-confidence-79: hsl(24.02, 51.96%, 33.90%);
    --color-confidence-80: hsl(24.00, 51.40%, 33.90%);
    --color-tooltip: rgba(0, 0, 0, 0.8);
}

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    cursor: auto;
}

label {
    margin-top: 10px;
    display: block;
}

select {
    padding: 8px;
    margin: 5px 0;
}

input[type="text"], input[type="number"], input[type="password"], textarea {
    padding: 8px;
    margin: 5px 0;
    width: 100%;
    font-family: monospace;
    &:invalid {
        border: var(--bad-fg) solid 3px;
    }
    &:valid {
        border: var(--ok-fg) solid 3px;
    }
    &:focus-visible {
        border-color: var(--accent);
    }
}

.form-group {
    margin-bottom: 15px;
}

#similarity-search > .f-row > .form-group:first-child {
    max-width: 50em;
}

input#query, input#query-dql {
    max-width: 89em;
}

.query-tab {
    form > details {
        margin-top: calc(var(--gap)*1/2);
        margin-bottom: var(--gap);
    }
    details {
        summary {
            padding-top: calc(var(--gap)*1/2);
            padding-bottom: calc(var(--gap)*1/2);
        }
        i {
            text-indent: 3em hanging each-line;
            flex: 1;
        }
    }
}

button[role="tab"][role="tab"] {
    cursor: default;
    > svg {
        height: 15px;
        width: 15px;
        vertical-align: middle;
        &:hover {
            background-color: var(--red-10);
            cursor: pointer;
        }
    }
}

.hint {
    color: var(--plain-graphical-fg);
    font-size: 0.9rem;
}

form.f-row {
    row-gap: 0;
    column-gap: var(--gap);
}

div:has(> #apikey-container){
    align-items: stretch;
    > div {
        margin-top: 25px;
        margin-bottom: 25px;
        > .box {
            border-start-start-radius: 0;
            border-start-end-radius: 0;
            margin-block-start: 0;
            height: 100%;
            margin-bottom: 0;
            .f-row {
                gap: calc(var(--gap)/2);
            }
            input[type="checkbox"] {
                width: unset;
            }
        }
    }
    > #apikey-container {
        > .box {
            #apikey {
                min-width: 27em;
            }
        }
    }
    > #quota-container {
        > .box {
            display: flex;
            flex-direction: column-reverse;
            #quota-data {
                margin-bottom: 25px;
            }
        }
    }
    > #file-upload-container {
        table {
            font-family: monospace, monospace;
            font-size: 12;
            td {
                &:last-child {
                    min-width: 45em;
                    padding-left: 8px;
                }
            }
        }
    }
}

mark, chip {
    &.gray {
        background: var(--gray-12);
        color: var(--gray-2);
        border-color: var(--gray-2);
    }
    &.red {
        background: var(--red-12);
        color: var(--red-2);
        border-color: var(--red-2);
    }
    &.pink {
        background: var(--pink-12);
        color: var(--pink-2);
        border-color: var(--pink-2);
    }
    &.purple {
        background: var(--purple-12);
        color: var(--purple-2);
        border-color: var(--purple-2);
    }
    &.violet {
        background: var(--violet-12);
        color: var(--violet-2);
        border-color: var(--violet-2);
    }
    &.indigo {
        background: var(--indigo-12);
        color: var(--indigo-2);
        border-color: var(--indigo-2);
    }
    &.blue {
        background: var(--blue-12);
        color: var(--blue-2);
        border-color: var(--blue-2);
    }
    &.cyan {
        background: var(--cyan-12);
        color: var(--cyan-2);
        border-color: var(--cyan-2);
    }
    &.teal {
        background: var(--teal-12);
        color: var(--teal-2);
        border-color: var(--teal-2);
    }
    &.green {
        background: var(--green-12);
        color: var(--green-2);
        border-color: var(--green-2);
    }
    &.lime {
        background: var(--lime-12);
        color: var(--lime-2);
        border-color: var(--lime-2);
    }
    &.yellow {
        background: var(--yellow-12);
        color: var(--yellow-2);
        border-color: var(--yellow-2);
    }
    &.orange {
        background: var(--orange-12);
        color: var(--orange-2);
        border-color: var(--orange-2);
    }
    &.choco {
        background: var(--choco-12);
        color: var(--choco-2);
        border-color: var(--choco-2);
    }
    &.brown {
        background: var(--brown-12);
        color: var(--brown-2);
        border-color: var(--brown-2);
    }
    &.sand {
        background: var(--sand-12);
        color: var(--sand-2);
        border-color: var(--sand-2);
    }
    &.camo {
        background: var(--camo-12);
        color: var(--camo-2);
        border-color: var(--camo-2);
    }
    &.jungle {
        background: var(--jungle-12);
        color: var(--jungle-2);
        border-color: var(--jungle-2);
    }    
}

.flex-break {
    flex-basis: 100%;
    height: 0;
}

.query-tab button {
    font-size: 1.2rem;
    padding: 5px 10px;
}

#mime-help-container {
    h4 {
        margin-bottom: 10px;
    }
    > #categories {
        > chip {
            cursor: pointer;
            &:not([toggled]) {
                background: var(--box-bg);
                color: var(--fg);
                border-color: var(--accent);
            }
        }
    }
    > #mime-types {
        > chip {
            border: 0px;
            &:hover {
                cursor: copy;
                text-decoration: solid underline overline 1px;
            }
        }
    }
}

#error-message {
    #disappear-indicator {
        width: 30px;
        height: 30px;
        margin-right: 15px;

        transform: rotate(-90deg); /* Start from top (12 o'clock) */
    }
}

#example-sample-object {
    ul {
        --gap: 0;
    }

    .key {
      color: var(--yellow-2);
    }

    .value {
      color: var(--brown-2);
    }

    .toggle {
      cursor: pointer;
      user-select: none;
    }

    .collapsed > .content {
      display: none;
    }

    .arrow::before {
      content: '▶';
      display: inline-block;
      width: 1em;
      transform: rotate(0deg);
      transition: transform 0.2s;
    }

    .expanded > .arrow::before {
      transform: rotate(90deg);
    }
}

.svg-disappearing-circle {
    fill: none;
    stroke: var(--fg);
    stroke-width: 10;
    stroke-dasharray: 314.16; /* Approx. 2π * r (r = 50) */
    stroke-dashoffset: 0;
    animation: disappear-circle 10s linear forwards;
}

@keyframes disappear-circle {
    to {
        stroke-dashoffset: 314.16;
    }
}

#search-indicator {
    height: 30px;
    width: 30px;
    margin: 0px;
}

.download-button{
    padding-left: 3px;
}

.download-button > svg {
    margin: 3px;
    height: 15px;
    width: 15px;
}

#download-indicator {
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0px 4px;
}

.htmx-indicator {
    animation-play-state: paused;
    > use {
        animation-play-state: inherit;
    }
    &.htmx-request {
        animation-play-state: running;
    }
}

.svg-loading-circle {
    animation: loading-animation 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation-play-state: inherit;
    &:nth-of-type(1) {
        animation-delay: -0.4s;
    }
    &:nth-of-type(2) {
        animation-delay: -0.2s;
    }
    &:nth-of-type(3) {
        animation-delay: 0s;
    }
}

@keyframes loading-animation {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

#results-table {
    margin-top: 20px;
    cursor: auto;
    [role='tab'] > span {
        padding: 0px 6px;
        border-radius: .4em;
    }
    [role='tabpanel'] {
        padding: 0;
        overflow: auto;
        > #table-info-row {
            > aside {
                margin: 8px;
                font-size: 1em;
                font-style: italic;
                padding-block: calc(var(--gap)*2/3);
                overflow-x: auto;
                white-space: nowrap;
            }
            > #pagination-container {
                align-items: center;
                gap: calc(var(--gap)/3);
                margin-right: var(--gap);
                white-space: nowrap;
                > label, select {
                    font-size: .8rem;
                }
            }
        }
    }
}

#results-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#similars-table {
    thead {
        th {
            position: relative;
            #header-information{
                width: 15px;
                height: 15px;
                &:hover + .tooltip {
                    visibility: visible;
                }
            }
            .tooltip {
                top: 125%;
                bottom: auto;
                transform: translateX(-27px);
                &::after {
                    top: auto;
                    bottom: 100%;
                    left: 20px;
                    border-color: transparent transparent var(--color-tooltip) transparent;
                }
            }
            &:nth-last-child(-n + 6) {
                .tooltip {
                    transform: translateX(calc(-100% - 15px + 27px));
                    &::after {
                        left: calc(100% - 20px);
                    }
                }
            }
        }
    }
    #similars-table-body {
        font-family: monospace, monospace;
        font-size: 12;
        > tr {
            &:hover {
                box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.3);
                color: var(--gray-12);
            }
            > td:not(:last-child) > span {
                position: relative;
                &:hover {
                    cursor: copy;
                    text-decoration: solid underline overline 1px;
                    > .tooltip {
                        visibility: visible;
                    }
                }
            }
        }
    }
}

th, td {
    vertical-align: middle;
    padding: 2px 8px;
    white-space: nowrap;
    padding-inline-end: 0 !important;
}

.tooltip {
    visibility: hidden;
    background-color: var(--color-tooltip);
    color: var(--gray-0);
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    transform: translateX(calc(-20ch + 5px));
    min-width: 4em;
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 7.2rem;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-tooltip) transparent transparent transparent;
}