@import '../variables';

$overlay-padding-x: 4rem;
$overlay-padding-y: 3rem;

@mixin overlay($bg: $ec-color-bg-content, $padding-x: $overlay-padding-x, $padding-y: $overlay-padding-y) {
    align-items: center;
    background-color: $bg;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: $padding-y $padding-x;
    z-index: map-get($ec-z-indexes, overlay);

    // @deprecated when the ng1 overlay goes away
    right: 0;
    top: 0;
    position: absolute;
    bottom: 0;
    left: 0;
}

@mixin overlay-container {
    position: relative;
}

@mixin overlay-message($color: $gray-3, $font-size: $ec-font-size-title) {
    color: $color;
    font-size: $font-size;
}

@mixin overlay-empty-wrapper {
    max-width: rem-calc(480px);
    margin: 0 auto;
}