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

@mixin overlay($bg: var(--ec-overlay-background-color, var(--ec-background-color)), $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: var(--ec-z-index-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: var(--ec-color-secondary-dark), $font-size: var(--ec-font-size-title)) {
    color: $color;
    font-size: $font-size;
}

@mixin overlay-empty-wrapper {
    max-width: 30rem;
    margin: 0 auto;
}