@import '../../global';
@import '../../mixins/typography';

.modal {
    background-color: color('white');

    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    min-width: 450px;
    max-width: 600px;

    border-radius: $border-radius;

    padding: $padding;

    &_overlay {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;

        background-color: rgba(color('black'), $opacity-high);
    }

    &_top {
        display: flex;
        justify-content: flex-end;
        align-items: baseline;

        &__title {
            justify-content: space-between;
        }
    }

    &_content {
        @include small;

        margin: $push 0px;
    }
}