@import "hover.pcss";

@define-mixin form {

    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    accent-color: var(--monster-color-secondary-2);

    & label {
        color: var(--monster-color-primary-1);
        background-color: var(--monster-bg-color-primary-1);
        display: grid;
    }

    & label:has(input[type="radio"]) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;

        & input {
            margin-right: 0.4rem;
            margin-left: 0.4rem;
        }

    }

    & label:has(input[type="radio"]) ~ label:has(input[type="radio"]) {
        margin-top: 0.2rem;
    }

    & label:has(input[type="checkbox"]) {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;

        & input {
            margin-right: 0.4rem;
            margin-left: 0.4rem;
        }

    }

    & label:has(input[type="checkbox"]) ~ label:has(input[type="checkbox"]) {
        margin-top: 0.2rem;
    }

    & label ~ label {
        margin-top: 1rem;
    }

    & label ~ fieldset {
        margin-top: 1rem;
    }

    & button,
    & input,
    & select,
    & textarea {
        font-family: inherit;
        font-size: 100%;
        padding: 0.4rem 0.6rem;
        margin: 0;
        outline: none;
        box-sizing: border-box;
        accent-color: var(--monster-color-secondary-2);

        color: var(--monster-color-primary-1);
        background-color: var(--monster-bg-color-primary-1);

    }


    & button {
        color: var(--monster-color-tertiary-1);
        background-color: var(--monster-bg-color-tertiary-1);

        /** monster-border-primary-1 */
        border-width: var(--monster-border-width);
        border-radius: var(--monster-border-radius);
        border-style: var(--monster-border-style);
        border-shadow: var(--monster-box-shadow-1);
        border-color: var(--monster-bg-color-primary-3);
    }

    & option:checked {
        background-color: var(--monster-bg-color-primary-3);
        color: var(--monster-color-primary-3);
    }

    & option:focus {
        background-color: var(--monster-bg-color-primary-3);
        color: var(--monster-color-primary-3);
    }

    & option:hover {
        background-color: var(--monster-bg-color-primary-3);
        color: var(--monster-color-primary-3);
    }

    & input,
    & select,
    & textarea {
        border: 0;
        border-bottom-width: thin;
        border-bottom-radius: var(--monster-border-radius);
        border-bottom-style: var(--monster-border-style);
        border-bottom-shadow: var(--monster-box-shadow-1);
        border-bottom-color: var(--monster-bg-color-primary-1);
    }


    & input,
    & select,
    & textarea {
        border-width: thin;
        border-radius: var(--monster-border-radius);
        border-style: var(--monster-border-style);
        border-shadow: var(--monster-box-shadow-1);
        border-color: var(--monster-bg-color-primary-2);
    }


    & button,
    & input:not([type="radio"]):not([type="checkbox"]),
    & select,
    & textarea {
        width: 100%;
    }

    & label {
        width: 100%;

        & input:not([type="radio"]):not([type="checkbox"]),
        & select,
        & textarea {
            width: 100%;
            margin-top: 0.2rem;
        }

    }

    & label + input:not([type="radio"]):not([type="checkbox"]),
    & label + select,
    & label + textarea {
        width: 100%;
        margin-top: 0.2rem;
    }


    & fieldset {
        margin: 0;
        position: relative;
        padding: 2.5rem 2rem 2rem;
        border: 2px solid var(--monster-bg-color-primary-3);

        background-color: var(--monster-bg-color-primary-1);
        color: var(--monster-color-primary-1);

        box-sizing: border-box;
        width: 100%;
        outline: none;

        & legend {
            position: absolute;
            top: 0;
            right: 0px;
            padding: 0.1rem 2rem 0.2rem 0.5rem;
            max-width: 95%;
            text-align: right;
            text-transform: uppercase;
            text-overflow: ellipsis;
            font-size: 0.8rem;
            overflow: hidden;
            white-space: nowrap;
        }

        & label {
        }

    }

    & fieldset ~ fieldset {
        margin-top: 1rem;
    }

    & button {
        margin: 0.2rem 0;
    }

    & button:first-of-type {
        margin-top: 1rem;
    }

    & button:last-of-type {
        margin-bottom: 1rem;
    }

    & input:focus-visible {
        outline: none;
    }


    & button:focus,
    & input:focus,
    & select:focus,
    & textarea:focus {
        outline: 1px dashed var(--monster-color-selection-4);
        outline-offset: 2px;
    }


    @media (prefers-color-scheme: light) {
        & button,
        & input,
        & select,
        & textarea {
            background-color: var(--monster-bg-color-primary-2);
            color: var(--monster-color-primary-2);
            border-color: var(--monster-bg-color-primary-3);
        }

        & button:focus,
        & input:focus,
        & select:focus,
        & textarea:focus {
            outline: 1px dashed var(--monster-color-selection-3);
            outline-offset: 2px;
        }        
        
    }

    & button:hover,
    & input:hover:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
    & select:hover,
    & textarea:hover {
        @mixin box-hover;
    }


}