/* STYLING FOR INPUT ELEMENTS USED IN FORMS */

/* Text & textarea */
/* Also used for dropdown */
label.text-input {
    position: relative;
    padding: 0.75em;
    width: 90%;
    outline: solid 1px var(--light80Grey);
    border-radius: 0.5em;
    display: grid;
    box-sizing: border-box;
    text-align: center;

    & h5.label {
        position: absolute;
        display: inline-block;
        color: var(--mainGrey);
        top: -0.75em;
        left: 0;
        right: 0;
        margin: auto;
        background-color: white;
        width: max-content;
        padding: 0 0.35em;
        user-select: none;
        font-size: 0.9em;
    }

    & span.tooltip {
        font-size: 1em;
        position: absolute;
        top: 0;
        right: 0;
        margin: 1em;
    }


    & input,
    textarea,
    select {
        outline: none;
        border: none;
        font-size: 1em;
        font-family: Arial, Helvetica, sans-serif;
    }

    & input,
    textarea {
        padding-right: 2.5em;
    }

    & textarea {
        height: 10em;
        resize: none;
        margin-right: 1.5em;
    }

    & select {
        width: 100%;
        min-width: 7.5em;
    }

    & select:hover {
        cursor: pointer;
    }

}

label.text-input:hover {
    outline: solid 2px var(--mainPink);
    cursor: text;

    & h5 {
        color: black;
    }
}

label.text-input:has(input:focus),
label.text-input:has(textarea:focus),
label.text-input:has(select:open) {
    outline: solid 2px var(--mainPink);

    & h5 {
        color: black;
    }
}

label.text-input.error {
    outline-color: var(--errorRed);
    color: var(--errorRed);
    outline-width: 2px;
}

/* Specifically for dropdown */
select,
::picker(select) {
    appearance: base-select;
}

::picker(select) {
    padding: 0.5em 0;
    outline: solid 2px var(--mainPink);
    border: none;
    border-radius: 0.5em;
}

select:hover {
    background-color: var(--light90Grey);
}

select::picker-icon {
    content: "";
    background-image: url("../icons/stroke_arrow_down.svg");
    width: 1em;
    height: 1em;
    background-size: cover;
}

select {
    display: flex;
    align-items: center;
}

label.dropdown.tooltip {
    padding-right: 2.5em;
}

/* Input with internal submit button */
label.add-to-collection {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    width: fit-content;
    outline: solid 1px var(--light80Grey);
    padding: 0.4em;

    & h5.label {
        margin-left: 3em;
        color: var(--mainGrey);
        top: -0.75em;
    }

    & input[list]::-webkit-calendar-picker-indicator {
        display: none !important;
    }

    & input {
        grid-column-start: 1;
        grid-column-end: 2;
        width: 12em;
        padding-right: 0.5em;
    }

    & button {
        grid-column-start: 2;
        grid-column-end: 3;
        background-color: var(--light40Pink);
        padding: 0.4em;
        display: flex;
        align-items: center;
        filter: grayscale(50);
        width: fit-content;
        border-radius: 0.5em;

        & svg {
            fill: white;
        }
    }

    & button:hover {
        filter: grayscale(0);
        cursor: pointer;
    }
}

/* Checkbox */
label.checkbox {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: var(--mainGrey);
    user-select: none;

    & span.tooltip {
        font-size: 1em;
        display: flex;
    }

    & input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        background-color: white;
        margin: 0;
        font: inherit;
        color: currentColor;
        width: 0.8em;
        height: 0.8em;
        border: 2px solid var(--light40Pink);
        filter: grayscale(50);
        border-radius: 0.15em;
        display: grid;
        place-content: center;
    }

    & input[type="checkbox"]::before {
        content: "";
        width: 0.35em;
        height: 0.35em;
        transform: scale(0);
        box-shadow: inset 1em 1em var(--light40Pink);
    }

    & input[type="checkbox"]:checked {
        border: 2px solid var(--mainPink);
    }

    & input[type="checkbox"]:checked::before {
        transform: scale(1);
        box-shadow: inset 1em 1em var(--mainPink);
    }

    & input[type="checkbox"]:hover {
        cursor: pointer;
    }

    & :hover {
        cursor: pointer;
    }
}