@use '../settings';
@use '../function' as *;
@use '../mixin';

@mixin roolith-modal() {
    .modal {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: var(--r-modal-background);
        z-index: 10;
        @if (settings.$modal-layout == css-grid) {
            grid-template-rows: minmax(rem(20), 2fr) auto minmax(rem(20), 2fr);
            grid-template-areas:
                'header'
                'body'
                'footer';
        }
        display: none;
        padding: 0 rem(20);

        &.active {
            @if (settings.$modal-layout == css-grid) {
                display: grid;
            } @else if(settings.$modal-layout == traditional) {
                display: block;
            } @else if(settings.$modal-layout == flex) {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .modal-content {
        position: relative;
        @if (settings.$modal-layout == css-grid) {
            grid-area: body;
            margin-left: auto;
            margin-right: auto;
            @extend .animation, .fadeInUp;
        } @else if(settings.$modal-layout == traditional) {
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            @extend .animation, .fadeIn;
        }
        @if (settings.$modal-layout == flex) {
            max-height: 90%;
            @extend .animation, .fadeInUp;
        }
        max-width: rem(600);
        overflow-y: auto;
        background: var(--r-modal-content-background);
        border-radius: var(--r-modal-content-radius);
        box-shadow: var(--r-modal-content-shadow);

        &.small {
            max-width: rem(300);
        }

        &.large {
            max-width: rem(800);
        }

        &.fluid {
            max-width: 80%;
        }
    }

    .modal-header {
        @include mixin.clearfix();
        padding: var(--r-modal-content-spacing);
        border-bottom: rem(1) solid var(--r-modal-border-color);
        font-size: rem(16);
        line-height: rem(22);
        font-weight: var(--r-global-font-bold-weight);
    }

    .modal-body {
        padding: var(--r-modal-content-spacing);
    }

    .modal-footer {
        padding: var(--r-modal-content-spacing);
        border-top: rem(1) solid var(--r-modal-border-color);
        display: flex;
        gap: rem(10);
    }

    .modal-footer-right {
        justify-content: flex-end;
    }

    .modal-close {
        position: absolute;
        top: 0;
        right: 0;
        background: none;
        border: none;
        padding: var(--r-modal-content-spacing);
        font-size: rem(18);
        z-index: 2;
        cursor: pointer;
        color: var(--r-modal-close-color);
        @include mixin.transition('opacity');

        &:hover {
            @include mixin.opacity(0.7);
        }
    }
}