@import 'modal-polyfill';

:root:has(.ffe-modal[open]) {
    overflow-y: hidden;
}

.ffe-modal {
    border: none;
    border-radius: 24px;
    padding: 0;
    background: var(--ffe-color-surface-primary-default);

    &[open] {
        pointer-events: auto;
    }

    &:focus {
        outline: none; //for å unngå styling i safari
    }

    &::backdrop {
        background-color: rgba(2, 10, 10, 0.5);
        backdrop-filter: blur(4px);
    }

    &__body {
        max-width: 600px;
    }

    &__block {
        margin: var(--ffe-spacing-md);

        &:first-of-type {
            margin-top: 0;
            padding-top: var(--ffe-spacing-md);
        }

        &:last-of-type {
            margin-bottom: 0;
            padding-bottom: var(--ffe-spacing-md);
        }
    }

    &__close {
        width: auto; //For å ikke få en vid knapp på mindre skjermer
        aspect-ratio: 1;
        font: inherit;
        cursor: pointer;
        outline: 2px solid transparent;
        padding: var(--ffe-spacing-2xs);
        border-radius: 50%;
        float: right;
        margin: var(--ffe-spacing-md);
        outline-offset: 4px;
        transition: all var(--ffe-transition-duration) var(--ffe-ease);

        &::after {
            content: '';
            display: block;
            clear: both;
        }
    }

    /* Add a more specific selector to target only the close button in modals 
    /* This ensures the styling works regardless of CSS import order */
    &[open] &__close {
        width: auto;
        display: block;

        @media (width >= 480px) {
            width: auto;
            display: block;
        }
    }
}