@import '../../css/variables';
@import '../../css/mixins';
@import '../../css/icons';
@import 'css/variables';
@import 'css/sizes';
@import 'css/colors';

$_border-radius: var(----border-radius);
$_border-width: var(----border-width);
$_border-color: var(----border-color);

.modal-wrapper {
    background: var(----wrapper--background);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    text-align: left; // Ensures proper alignment if parent has it changed
    list-style: none;
    line-height: var(----line-height);
    display: block;
    width: calc(100% - var(----margin-left) - var(----margin-right));
    max-width: var(----width);
    border-radius: var(----border-radius);
    box-shadow: var(----box-shadow);

    > .modal-header {
        display: flex;
        justify-content: space-between;
        background: var(----header--background);
        border-color: var(----header--border-color);
        border-style: var(----header--border-style);
        border-width: var(----header--border-width);
        border-top-left-radius: var(----border-top-left-radius);
        border-top-right-radius: var(----border-top-right-radius);
        color: var(----header--color);
        padding: var(----header--padding);

        > .close {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 1.5rem;
            width: 1.5rem;
            line-height: 1.5rem;
            font-size: 0.5rem;
            cursor: pointer;
            padding: 0;
            border: 0;
            transition: background-color 0.3s ease;
            background-color: transparent;
            border-radius: var(----border-radius);

            > .icon {
                mask-image: url($ink-times);
                mask-position: center center;
                mask-repeat: no-repeat;
                background-color: var(----header--color);
                width: var(----font-size);
                height: var(----font-size);
                mask-size: calc(var(----font-size) / 2) calc(var(----font-size) / 2);
            }

            &:hover,
            &:focus {
                outline: none;
                background-color: rgba(0, 0, 0, 0.1);
            }

            &:active {
                background-color: rgba(0, 0, 0, 0.15);
            }
        }
    }

    > .modal-body {
        background: var(----body--background);
        border-color: var(----body--border-color);
        border-style: var(----body--border-style);
        border-width: var(----body--border-width);
        color: var(----body--color);
        padding: var(----body--padding);
    }

    > .modal-footer {
        background: var(----footer--background);
        border-color: var(----footer--border-color);
        border-style: var(----footer--border-style);
        border-width: var(----footer--border-width);
        border-bottom-left-radius: var(----border-bottom-left-radius);
        border-bottom-right-radius: var(----border-bottom-right-radius);
        color: var(----footer--color);
        padding: var(----footer--padding);
    }

    > .modal-header + .modal-body,
    > .modal-header + .modal-footer,
    > .modal-body + .modal-footer,
    > .modal-body + .modal-body {
        border-top-width: 0;
    }
}