/* @docs */
$modal-content-background-color: $white !default;
$modal-content-border-radius: $base-border-radius !default;
$modal-overlay-background-color: hsla(0,0%,4%,.86) !default;
$modal-close-border-radius: $base-rounded-border-radius !default;
$modal-close-right: 20px !default;
$modal-close-top: 20px !default;
$modal-close-size: 32px !default;
$modal-close-color: $white !default;
$modal-content-fullscreen-background-color: #f5f5f5 !default;
$modal-content-max-height: calc(100vh - 160px) !default;
$modal-content-margin: 0 auto !default;
$modal-zindex: 40 !default;
/* @docs */

.o-modal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    @include avariable('z-index', 'modal-zindex', $modal-zindex);
    &__overlay {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        @include avariable('background-color', 'modal-overlay-background-color', $modal-overlay-background-color);
    }
    &__content {
        overflow: auto;
        position: relative;
        @include avariable('margin', 'modal-content-margin', $modal-content-margin);
        @include avariable('max-height', 'modal-content-max-height', $modal-content-max-height);
        @include avariable('background-color', 'modal-content-background-color', $modal-content-background-color);
        @include avariable('border-radius', 'modal-content-border-radius', $modal-content-border-radius);
        &--full-screen {
            width: 100%;
            height: 100%;
            max-height: 100vh;
            margin: 0;
            @include avariable('background-color', 'modal-content-fullscreen-background-color', $modal-content-fullscreen-background-color);
        }
    }
    &__close {
        background: none;
        position: fixed;
        border: none;
        display: inline-block;
        vertical-align: top;
        @include avariable('border-radius', 'modal-close-border-radius', $modal-close-border-radius);
        @include avariable('right', 'modal-close-right', $modal-close-right);
        @include avariable('top', 'modal-close-top', $modal-close-top);
        @include avariable('height', 'modal-close-size', $modal-close-size);
        @include avariable('width', 'modal-close-size', $modal-close-size);
        @include avariable('color', 'modal-close-color', $modal-close-color);
    }
    &--mobile {
        .o-modal__content {
            width: 100%;
        }
    }
}