/*
 * noVNC general input element CSS
 * Copyright (C) 2025 The noVNC authors
 * noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
 * This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
 */

/*
 * Common for all inputs
 */
:root {
    --input-xpadding: 1em;
}

input, input::file-selector-button, button, select, textarea {
    /* Respect standard font settings */
    font: inherit;

    /* Disable default rendering */
    appearance: none;

    padding: 0.5em var(--input-xpadding);
    border: 1px solid var(--novnc-lightgrey);
    border-radius: 6px;
}

/*
 * Buttons
 */
input[type=button],
input[type=color],
input[type=image],
input[type=reset],
input[type=submit],
input::file-selector-button,
button,
select {
    border-bottom-width: 2px;

    /* This avoids it jumping around when :active */
    vertical-align: middle;
    margin-top: 0;
    color: black;
    font-weight: bold;
    background-color: var(--novnc-buttongrey);

    /* Disable Chrome's touch tap highlight */
    -webkit-tap-highlight-color: transparent;
}

/*
 * Select dropdowns
 */
select {
    --select-arrow: url('data:image/svg+xml;utf8, \
        <svg width="11" height="6" version="1.1" viewBox="0 0 11 6" \
             xmlns="http://www.w3.org/2000/svg"> \
            <path d="m10.5.5-5 5-5-5" fill="none" \
                  stroke="black" stroke-width="1.5" \
                  stroke-linecap="round" stroke-linejoin="round"/> \
        </svg>');

    /* FIXME: A bug in Firefox, requires a workaround for the background:
              https://bugzilla.mozilla.org/show_bug.cgi?id=1810958 */
    /* The dropdown list will show the select element's background above and
       below the options in Firefox. We want the entire dropdown to be white. */
    background-color: white;
    /* However, we don't want the select element to actually show a white
       background, so let's place a gradient above it with the color we want. */
    --grey-background: linear-gradient(var(--novnc-buttongrey) 100%,
                                       transparent);
    background-image:
        var(--select-arrow),
        var(--grey-background);
    background-position: calc(100% - var(--input-xpadding)), left top, left top;
    background-repeat: no-repeat;
    padding-right: calc(2*var(--input-xpadding) + 11px);
}
/* FIXME: :active isn't set when the <select> is opened in Firefox:
          https://bugzilla.mozilla.org/show_bug.cgi?id=1805406 */
select:active {
    /* Rotated arrow */
    background-image: url('data:image/svg+xml;utf8, \
        <svg width="11" height="6" version="1.1" viewBox="0 0 11 6" \
             xmlns="http://www.w3.org/2000/svg" transform="rotate(180)"> \
            <path d="m10.5.5-5 5-5-5" fill="none" \
                  stroke="black" stroke-width="1.5" \
                  stroke-linecap="round" stroke-linejoin="round"/> \
        </svg>'),
        var(--grey-background);
}
option {
    /* Prevent Chrome from inheriting background-color from the <select> */
    background-color: white;
    color: black;
    font-weight: normal;
}

/*
 * Shared between checkboxes and radiobuttons
 */

input[type=radio],
input[type=checkbox] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-color: transparent;
    background-color: var(--novnc-buttongrey);
    /* Disable Chrome's touch tap highlight to avoid conflicts with overlay */
    -webkit-tap-highlight-color: transparent;
    width: 16px;
    --checkradio-height: 16px;
    height: var(--checkradio-height);
    padding: 0;
    margin: 0 6px 0 0;
    /* Don't have transitions for outline in order to be consistent
       with other elements */
    transition: all 0.2s, outline-color 0s, outline-offset 0s;

    /* A transparent outline in order to work around a graphical clipping issue
       in WebKit. See bug: https://bugs.webkit.org/show_bug.cgi?id=256003 */
    outline: 1px solid transparent;
    position: relative; /* Since ::before & ::after are absolute positioned */

    /* We want to align with the middle of capital letters, this requires
       a workaround. The default behavior is to align the bottom of the element
       on top of the text baseline, this is too far up.
       We want to push the element down half the difference in height between
       it and a capital X. In our font, the height of a capital "X" is 0.698em.
     */
    vertical-align: calc(0px - (var(--checkradio-height) - 0.698em) / 2);
    /* FIXME: Could write 1cap instead of 0.698em, but it's only supported in
              Firefox as of 2023 */
    /* FIXME: We probably want to use round() here, see bug 8148 */
}
input[type=radio]:focus-visible,
input[type=checkbox]:focus-visible {
    outline-color: var(--novnc-lightblue);
}
input[type=checkbox]::before,
input[type=radio]::before {
    content: "";
    display: block; /* width & height doesn't work on inline elements */
    transition: inherit;
    /* Let's prevent the pseudo-elements from taking up layout space so that
       the ::before and ::after pseudo-elements can be in the same place. This
       is also required for vertical-align: baseline to work like we want it to
       on radio/checkboxes. If the pseudo-elements take up layout space, the
       baseline of text inside them will be used instead. */
    position: absolute;
}

/*
 * Checkboxes
 */
input[type=checkbox] {
    border-radius: 4px;
}
input[type=checkbox]:checked {
    background-color: var(--novnc-blue);
}
input[type=checkbox]::before {
    width: 25%;
    height: 55%;
    border-style: solid;
    border-color: transparent;
    border-width: 0 2px 2px 0;
    border-radius: 1px;
    transform: translateY(-1px) rotate(35deg);
}
input[type=checkbox]:checked::before {
    border-color: white;
}

/*
 * Radiobuttons
 */
input[type=radio] {
    border-radius: 50%;
    border: 1px solid transparent; /* To ensure a smooth transition */
}
input[type=radio]:checked {
    border: 4px solid var(--novnc-blue);
    background-color: white;
}
input[type=radio]::before {
    width: inherit;
    height: inherit;
    border-radius: inherit;
    opacity: 0;
}
input[type=radio]:checked::before {
    opacity: 1;
}

/*
 * Range sliders
 */
input[type=range] {
    border: unset;
    border-radius: 3px;
    height: 20px;
    padding: 0;
    background: transparent;
}
/* -webkit-slider.. & -moz-range.. cant be in selector lists:
   https://bugs.chromium.org/p/chromium/issues/detail?id=1154623 */
input[type=range]::-webkit-slider-runnable-track {
    background-color: var(--novnc-blue);
    height: 6px;
    border-radius: 3px;
}
input[type=range]::-moz-range-track {
    background-color: var(--novnc-blue);
    height: 6px;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 20px;
    border-radius: 6px;
    background-color: white;
    border: 1px solid dimgray;
    margin-top: -7px;
}
input[type=range]::-moz-range-thumb {
    appearance: none;
    width: 18px;
    height: 20px;
    border-radius: 6px;
    background-color: white;
    border: 1px solid dimgray;
    margin-top: -7px;
}

/*
 * File choosers
 */
input[type=file] {
    background-image: none;
    border: none;
}
input::file-selector-button {
    margin-right: 6px;
}

/*
 * Hover
 */
input[type=button]:hover,
input[type=color]:hover,
input[type=image]:hover,
input[type=reset]:hover,
input[type=submit]:hover,
input::file-selector-button:hover,
button:hover {
    background-color: var(--novnc-lightgrey);
}
select:hover {
    background-image:
        var(--select-arrow),
        linear-gradient(var(--novnc-lightgrey) 100%,
                        transparent);
}
@media (any-pointer: coarse) {
    /* We don't want a hover style after touch input */
    input[type=button]:hover,
    input[type=color]:hover,
    input[type=image]:hover,
    input[type=reset]:hover,
    input[type=submit]:hover,
    input::file-selector-button:hover,
    button:hover {
        background-color: var(--novnc-buttongrey);
    }
    select:hover {
        background-image:
            var(--select-arrow),
            var(--grey-background);
    }
}

/*
 * Active (clicked)
 */
input[type=button]:active,
input[type=color]:active,
input[type=image]:active,
input[type=reset]:active,
input[type=submit]:active,
input::file-selector-button:active,
button:active,
select:active {
    border-bottom-width: 1px;
    margin-top: 1px;
}

/*
 * Focus (tab)
 */
input:focus-visible,
input:focus-visible::file-selector-button,
button:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--novnc-lightblue);
    outline-offset: 1px;
}
input[type=file]:focus-visible {
    outline: none; /* We outline the button instead of the entire element */
}

/*
 * Disabled
 */
input:disabled,
input:disabled::file-selector-button,
button:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.4;
}
input[type=button]:disabled,
input[type=color]:disabled,
input[type=image]:disabled,
input[type=reset]:disabled,
input[type=submit]:disabled,
input:disabled::file-selector-button,
button:disabled,
select:disabled {
    background-color: var(--novnc-buttongrey);
    border-bottom-width: 2px;
    margin-top: 0;
}
input[type=file]:disabled {
    background-image: none;
}
select:disabled {
    background-image:
        var(--select-arrow),
        var(--grey-background);
}
input[type=image]:disabled {
    /* See Firefox bug:
       https://bugzilla.mozilla.org/show_bug.cgi?id=1798304 */
    cursor: default;
}