@import '../../containers/Application/colors.scss';
@import './variables.scss';

$primaryBackground: $concrete;
$secondaryBackground: $white;
$borderRadius: 3px;
$overlayBorderColor: $silver;

$iconFontSize: 14px;

$confirmBackground: $shakespeare;
$confirmColor: $white;

$transitionDuration: 300ms;

.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;

    & > * {
        opacity: 0;
        will-change: opacity;
        transition: opacity $transitionDuration;
    }
}

.overlay {
    position: relative;
    top: -100%;
    opacity: 0;
    will-change: top, opacity;
    transition: top $transitionDuration, opacity $transitionDuration;
    pointer-events: none;
    max-height: calc(100vh - $overlayMarginBottom);

    & > * {
        pointer-events: auto;
    }

    &.small {
        width: 50vw;
    }

    &.large {
        width: 80vw;
    }
}

.is-down {
    & > * {
        opacity: 1;
    }

    .overlay {
        top: 0;
    }
}

.content {
    border-radius: 0 0 $borderRadius $borderRadius;
    overflow: hidden;
    box-shadow: 0 10px 18px 0 rgba($mineShaft, .5);

    .header {
        background: $primaryBackground;
        border-bottom: 1px solid $overlayBorderColor;
        height: $overlayHeaderHeight;
        text-align: center;
        line-height: $overlayHeaderHeight;

        h2 {
            display: inline-block;
            margin: 0;
        }
    }

    .article {
        max-height: $overlayContentMaxHeight;
        overflow: auto;
        background: $primaryBackground;
    }

    .footer {
        background: $secondaryBackground;
        border-top: 1px solid $overlayBorderColor;
        height: $overlayFooterHeight;
        padding: 0 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        button:only-child {
            margin-left: auto;
        }
    }

    .icon {
        position: absolute;
        right: 60px;
        font-size: $iconFontSize;
        font-weight: bold;
        line-height: $overlayHeaderHeight;
        text-align: center;
        cursor: pointer;
    }
}
