@import "../variables";
@import "../colors";
@import "../mixins";

$root_default_width: 650px;
$content_min_height: 55px;

.Modal-mask {
    @include inline-middle;

    background: $color_fade;
    bottom: 0;
    left: 0;
    opacity: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    transition: all .2s $artistic_transition_function;
    visibility: hidden;
    z-index: 999;

    &-visible {
        opacity: 1;
        transition: all .3s $artistic_transition_function;
        visibility: visible;
    }
}

.Modal-root {
    @include panel;

    display: inline-block;
    margin: 0 auto;
    position: relative;
    text-align: left;
    transform: translateY(-40px) scale(.7);
    transition: all .15s $artistic_transition_function;
    width: $root_default_width;

    .Modal-mask-visible & {
        transform: none;
        transition: all .2s $artistic_transition_function .15s;
    }
}

.Modal-wrapper {
    padding-left: $offset_main * 2;
    padding-right: $offset_main * 2;
}

.Modal-buttons-wrapper {
    padding-bottom: $offset_main * 2;
    padding-top: $offset_main * 2;
    text-align: right;
}

.Modal-button {
    & + & {
        margin-left: $offset_main;
    }
}

.Modal-title-wrapper {
    border-bottom: $border_main;
    padding-bottom: $offset_main;
    padding-top: $offset_main;
    position: relative;
}

.Modal-title-text {
    margin: 0;
}

.Modal-close-trigger {
    @include inline-middle;

    cursor: pointer;
    height: 100%;
    padding-left: $offset_main * 1.5;
    padding-right: $offset_main * 1.5;
    position: absolute;
    right: 0;
    top: 0;
}

.Modal-content-wrapper {
    padding-bottom: $offset_main * 1.5;
    padding-top: $offset_main * 1.5;
}

.Modal-content {
    min-height: $content_min_height;
    word-break: break-all;
}

.Modal-paragraph {
    & + & {
        margin-top: $offset_main;
    }
}

.Modal-section {
    & + & {
        margin-top: $offset_main * 2;
    }
}