@use "../variables" as vars;
@use "../functions" as func;
@use "../mixins" as mixins;

body.modal-open {
    overflow: hidden;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: func.color(vars.$modal-overlay-background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: vars.$zindex-modal-backdrop;
    padding: 16px;
    visibility: hidden; // Used instead of 'display: none' for transitions
    opacity: 0; // Used for transitions

    &.show {
        visibility: visible;
        opacity: 1;
    }
}

.fds-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: vars.$zindex-modal;
    margin: func.units(4);
    pointer-events: none;

    &[aria-hidden="false"], &.show-modal {
        display: flex;
    }

    .modal-content {
        display: block;
        align-self: center;
        max-height: 100%;
        overflow: hidden auto;
        background-color: func.color(vars.$modal-background-color);
        box-shadow: func.shadow('heavy');
        max-width: 800px;
        width: 100%;
        position: relative;
        margin: func.units(5) auto;
        border-radius: func.border-radius('medium');
        pointer-events: auto;
    }

    .modal-header {
        padding: 16px 24px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: func.color(vars.$modal-header-background-color);
        color: func.color(vars.$modal-header-text-color);

        @include mixins.media-breakpoint-up(md) {
            padding: func.units(7) func.units(7) func.units(3); // top | left and right | bottom
        }

        @include mixins.media-breakpoint-up(md) {
            padding-right: 48px;
        }

        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
            color: func.color(vars.$modal-header-text-color);
        }
    }

    .modal-title {
        margin: func.units(5) func.units(8) func.units(3) 0;

        @include mixins.media-breakpoint-up(md) {
            margin: 0 func.units(8) 0 0;
        }
    }

    .modal-body {
        background-color: func.color(vars.$modal-body-background-color);
        color: func.color(vars.$modal-body-text-color);
        padding: 0 24px;

        @include mixins.media-breakpoint-up(md) {
            padding: func.units(3) func.units(7); // top and bottom | left and right
        }

        & > *:first-child {
            margin-top: 0;
        }

        p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
            color: func.color(vars.$modal-body-text-color);
        }
    }

    .modal-footer {
        padding: 0 func.units(5) func.units(5);
        background-color: func.color(vars.$modal-footer-background-color);
        color: func.color(vars.$modal-footer-text-color);

        @include mixins.media-breakpoint-up(md) {
            padding: func.units(3) func.units(7) func.units(7); // top | left and right | bottom
        }

        @include mixins.media-breakpoint-up(lg) {
            display: flex;
        }

        .button {
            margin-top: func.units(3);
            margin-right: func.units(4);
        }

        p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
            color: func.color(vars.$modal-footer-text-color);
        }
    }

    .modal-close {
        position: absolute;
        top: 8px;
        right: 8px;
        width: inherit;
        color: func.color(vars.$modal-header-close-color);

        @include mixins.media-breakpoint-up(md) {
            top: func.units(5);
            right: func.units(6);
        }

        &:hover,
        &:visited,
        &:focus {
            color: func.color(vars.$modal-header-close-color);
        }
    }
}