accounts-frontend/src/components/ui/popup/popup.scss

@import '~components/ui/colors.scss';
@import '~components/ui/fonts.scss';

$popupPadding: 20px;

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 200;

    background: rgba(#fff, 0.8);

    text-align: center;
    white-space: nowrap;

    overflow-x: hidden;
    overflow-y: auto;

    &:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: 0;
    }
}

.popupWrapper {
    $padding: 20px;
    $maxPopupWidth: 500px;

    display: inline-block;
    width: 100%;
    max-width: $maxPopupWidth + $padding * 2;
    box-sizing: border-box;
    margin: $padding auto;
    padding: 0 $padding;
    vertical-align: middle;
}

.popup {
    white-space: normal;
    text-align: left;

    background: #fff;
    box-shadow: 0 0 10px rgba(#000, 0.2);

    color: #666;

    :invalid {
        button {
            opacity: 0.3;
            pointer-events: none;
        }
    }
}

.header {
    position: relative;
    background: $light;
    padding: 15px $popupPadding;
    border-bottom: 1px solid #dedede;
}

.headerTitle {
    font-size: 20px;
    font-family: $font-family-title;
    text-align: center;
}

.body {
    padding: $popupPadding;
}

.close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 15px;
    cursor: pointer;
    font-size: 20px;
    color: rgba(#000, 0.4);
    background: rgba(#000, 0);
    transition: 0.25s;

    &:hover {
        color: rgba(#000, 0.6);
        background: rgba(#fff, 0.75);
    }
}

@media (min-width: 655px) {
    .close {
        position: fixed;
        padding: 35px;
    }
}