@import 'vars';
@import 'mixins';

/* stylelint-disable selector-class-pattern */

$color-code: #263238;
$color-border2: darken($color-border, 5%);
$color-active: #ff5370;
$color-background: #efefef;
$size-email-header: 5rem;

.email-editor {
    pre {
        font-size: 1rem !important;
    }

    &-linenumber {
        font-size: 1rem !important;
    }

    &-hints {
        background: darken($color-code, 2%);
        border: 0;
    }

    &-hint {
        color: darken($color-white, 40%);
        font-size: 1rem;
        font-weight: normal;
        padding: 4px;
    }

    &-hint-active {
        background: none !important;
        border: 0;
        color: $color-active;
    }

    &-lint-tooltip {
        background: darken($color-code, 2%);
        border: 0;
        color: $color-white;
        font-size: 1rem;
        font-weight: normal;
        padding: 10px;
    }

    &-lint-message-error {
        background-image: none;
        border: 0;
        font-size: 1rem;
        font-weight: normal;
        padding-left: 0;
    }
}

.email-templates {
    .header {
        margin-bottom: 2rem;
    }
}

.email-template {
    & {
        width: 300px;
    }

    h4 {
        margin-bottom: 0;
    }

    &-preview {
        @include force-height(300px);
        overflow: hidden;
        pointer-events: none;
    }

    iframe {
        @include force-width(600px);
        @include force-height(600px);
        overflow: hidden;
        pointer-events: none;
        transform: scale(.5);
        transform-origin: 0 0;
    }

    .card-body {
        border-top: 1px solid $color-border;
        padding-right: 3rem;
        padding-top: .75rem;
        position: relative;
    }

    .updated {
        margin-top: .25rem;
    }

    .badge {
        margin-top: .25rem;
    }

    .overlay-target {
        @include absolute(.5rem, .75rem);
    }
}

.email-properties {
    @include fixed($size-header, 0, 0, null);
    @include box-shadow-outer(-2px, 0, 4px, .05);
    background-color: $color-white;
    border: 0;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.5rem;
    width: 400px;
    z-index: 1000;
}

.email {
    &-container {
        @include fixed($size-header + $size-email-header, 0, 0, $size-sidebar);
        background: $color-white;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    &-menu {
        padding: 1rem 1.5rem;
    }
}

.email-header {
    @include fixed($size-header, 0, 0, $size-sidebar);
    height: $size-email-header;
    padding: 1rem 1.5rem;
    padding-right: 1.5rem;
    z-index: 1;

    h2 {
        margin: 0;
        margin-right: 2rem;
    }

    .nav {
        border: 0;
        font-size: 1.1rem;
        font-weight: normal;
    }

    .nav-link {
        cursor: pointer;
    }
}

.email-body {
    & {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
    }

    textarea {
        border: 0;
        border-radius: 0;
        height: 100%;
    }

    &.hidden {
        flex-grow: 0;
        height: 0;
        overflow-x: hidden;
        overflow-y: hidden;
    }
}

.email-subject {
    & {
        position: relative;
    }

    .form-group {
        margin: 0;
    }

    label {
        @include absolute(11px, null, null, .75rem);
        color: $color-border-dark;
        font-size: .9rem;
        font-weight: normal;
        user-select: none;
    }

    input {
        border: 0;
        border-bottom: 1px solid $color-border;
        border-radius: 0;
        border-top: 1px solid $color-border;
        padding-left: 5rem;
    }
}

.gutter {
    &.gutter-horizontal {
        background: $color-border2;
        background-image: none;
        border: 0;
        cursor: ew-resize;
    }
}

.email-editor {
    & {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
    }

    & > div {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
    }

    textarea {
        background-color: $color-white !important;
        border: 0;
        border-radius: 0;
        resize: none;
        width: 100%;
    }

    &.white {
        .gutter {
            &.gutter-horizontal {
                background: $color-border;
            }
        }
    }

    .left {
        position: relative;

        .CodeMirror {
            @include absolute(0, 0, 0, 0);
            height: auto;
        }
    }

    .right {
        background: $color-background;
        border: 0;
        position: relative;

        .alert {
            @include absolute(1.5rem, 1.5rem, null, 1.5rem);
        }

        iframe {
            @include absolute(0, 0, 0, 0);
            min-height: 100%;
            min-width: 100%;
        }
    }
}

.btn-back {
    font-size: 1.5rem;
    padding-bottom: .25rem;
    padding-top: .25rem;
}

.btn-toggle {
    align-items: center;
    border-color: $secondary;
    border-radius: .25rem;
    display: flex;

    &:hover {
        transform: none;
    }

    label {
        margin-bottom: 0;
        margin-right: .5rem;
    }
}