@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 {
    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;
}