.dialog {

    display: flex;

    flex-direction: column;

    gap: 32px;

    width: min(580px, calc(100vw - 32px));

    padding: 32px 40px 40px;

    border: 0;

    border-radius: 8px;

    visibility: hidden;

    opacity: 0;

    transform: scale(0.96);

    transition:

        opacity 0.3s ease,

        transform 0.3s ease,

        visibility 0.3s,

        overlay 0.3s allow-discrete;



    &[open] {

        visibility: visible;

        opacity: 1;

        transform: scale(1);

    }



    &::backdrop {

        background: var(--color-dialog-backdrop);

        opacity: 0;

        transition:

            opacity 0.3s ease,

            display 0.3s allow-discrete,

            overlay 0.3s allow-discrete;

    }



    &[open]::backdrop {

        opacity: 1;

    }



    .dialog-form {

        display: flex;

        flex-direction: column;

        gap: 24px;

    }



    .dialog-error {

        color: var(--color-red-600);

        margin-bottom: -10px;

    }



    .dialog-title {

        margin-bottom: 6px;

        font-size: 30px;

        font-weight: 600;

        line-height: 1.1;

        color: var(--color-gray-800);

    }



    .field {

        display: flex;

        flex-direction: column;

        gap: 6px;

    }



    .field-error {

        color: var(--color-red-600);

        font-size: 14px;

        margin-bottom: -10px;

    }



    .field:has(.field-error:not([hidden])) input {

        border: 2px solid var(--color-red-600);

        outline: none;

    }



    .button.close {

        position: absolute;

        display: flex;

        align-items: center;

        justify-content: center;

        top: 12px;

        right: 12px;

        width: 40px;

        height: 40px;

        padding: 0;

        border-radius: 50%;

        background: transparent;

        border: none;

        color: var(--color-gray-800);



        &:hover {

            color: black;

        }



        &:focus-visible {

            outline: 2px solid var(--color-gray-800);

            outline-offset: 2px;

        }



        svg {

            display: block;

            width: 100%;

            height: 100%;

            padding: 5px;

            fill: currentColor;

        }

    }



    @starting-style {

        &[open] {

            opacity: 0;

            transform: scale(0.96);

        }



        &[open]::backdrop {

            opacity: 0;

        }

    }

}



.button {

    display: inline-block;

    background: var(--color-brand);

    border-radius: 4px;

    color: #fff;

    font-size: 16px;

    font-weight: 500;

    line-height: 20px;

    outline: none;

    padding: 12px 16px;

    text-align: center;

    text-decoration: none;



    &:hover {

        background: var(--color-red-800);

    }



    &:focus-visible {

        outline: 2px solid var(--color-red-600);

    }



    &.secondary {

        background: transparent;

        color: var(--color-gray-800);

        border: 2px solid var(--color-gray-800);

        transition: background 0.15s ease-in-out;



        &:hover {

            background: var(--color-gray-100);

        }



        &:active {

            color: var(--color-red-800);

            border-color: var(--color-red-800);

        }



        &:focus-visible {

            outline: 2px solid var(--color-gray-800);

        }

    }

}



.error-actions {

    display: flex;

    align-items: center;

    gap: 30px;



    a {

        color: var(--color-text);

        text-underline-offset: 3px;

        text-decoration: underline;

        user-select: none;



        &:hover {

            color: var(--color-red-800);

        }

    }

}



.select {

    position: relative;

    display: inline-block;

    max-width: 286px;

    border-radius: 4px;



    >select {

        appearance: none;

        width: 100%;

        height: 48px;

        border-radius: 4px;

        padding-right: 28px;

        padding-left: 12px;

        border: 1px solid var(--color-gray-800);

        background: var(--color-white);

        color: var(--color-text);

        font: inherit;

        outline: none;

        cursor: pointer;

        user-select: none;

    }



    &.error {

        >select {

            border: 2px solid var(--color-red-600);

        }

    }



    >select:has(option:disabled:checked) {

        color: var(--color-gray-500);



        option:not(:disabled) {

            color: var(--color-text);

        }

    }



    body.is-keyboard-nav &:has(select:focus) {

        outline: 2px solid var(--color-gray-800);

        outline-offset: 2px;

    }



    &::before,

    &::after {

        content: "";

        position: absolute;

        top: 50%;

        right: 12px;

        width: 8px;

        height: 1px;

        background: var(--color-gray-800);

        pointer-events: none;

    }



    &::before {

        transform: translate(-5px, -50%) rotate(45deg);

    }



    &::after {

        transform: translate(0, -50%) rotate(-45deg);

    }

}



.dropzone {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 500px;

    min-height: 250px;

    gap: 24px;

    border: 1px dashed var(--color-gray-400);

    border-radius: 5px;

    padding: 24px;

    text-align: center;



    &.is-dragover {

        border-color: var(--color-black);

    }



    ul {

        text-align: center;



        li {

            font-size: 14px;

            margin-top: 5px;

        }

    }

}