/*
    forms.css provides styling for form elements to ensure consistent appearance and spacing.
*/

@layer forms {

    form {

        label {
            display: flex;
            margin-bottom: 0.66rem;
            text-box-trim: trim-both;
            font-size: 0.85rem;
            font-weight: 600;
            opacity: 0.6;
            user-select: none;
            align-items: center;
            gap: 0.5rem;

            img {
                height: 1.125rem;
            }

            &:has(input[type=checkbox]),
            &:has(check-box) {
                display: flex;
                align-items: center;
                margin-bottom: 1.5rem;
                gap: 0.66rem;
            }
        }

        fieldset {
            border: 1px solid var(--md-gray);
            border-radius: var(--border);
            padding: 1rem;
            margin-bottom: 1rem;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="datetime-local"],
        input[type="date"],
        input[type="time"],
        input[type="number"] {
            width: 100%;
            height: 50px;
            margin-bottom: 1.5rem;

            /*&:last-child {*/
            /*    margin-bottom: 0;*/
            /*}*/
        }

        output {
            display: block;
            height: 50px;
            margin-bottom: 1.5rem;
            border: 1.5px outset #00000020;
            align-content: center;
            justify-content: center;
            padding: 0 1rem;
            border-radius: var(--border-minimal);
            text-wrap: nowrap;

            /*&:last-child {*/
            /*    margin-bottom: 0;*/
            /*}*/

            &[color="red"] {
                background-color: var(--md-red);
            }

            &[color="green"] {
                background-color: var(--md-green);
            }

            &[color="blue"] {
                background-color: var(--md-blue);
            }

            &[color="yellow"] {
                background-color: var(--md-yellow);
            }
        }

        input[type="time"],
        input[type="date"],
        input[type="datetime-local"] {
            width: auto;
        }

        select {
            width: 100%;
            height: 50px;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75em center;
            padding-right: 2.25em;
            cursor: pointer;
            margin-bottom: 1.5rem;
        }

        textarea {
            width: 100%;
            margin-bottom: 1.5rem;

            &:last-child {
                margin-bottom: 0;
            }
        }

        button-group {
            margin-top: 1rem;
            display: flex;
            gap: 1rem;
        }

        p {
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
        }
    }

    dialog form button-group {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        background-color: #dfdfdf;
        margin-bottom: -1.5rem;
        margin-top: 1.5rem;
        padding: 1.5rem;
    }

    dialog form textarea {
        padding: 1rem;
    }

    form.inline-form {
        display: inline;
    }

}