// (C) 2007-2020 GoodData Corporation
@import "../../core/styles/layout";
@import "../../core/styles/styles";

/* ==========================================================================
   Messages
   ========================================================================== */

.gd-message-enter,
.gd-message-leave.gd-message-leave-active {
    opacity: 0;
    transition: opacity 0.22s ease-in;
}

.gd-message-enter.gd-message-enter-active,
.gd-message-leave {
    opacity: 1;
}

$gd-messages-space: 5px;
$gd-message-padding-vertical: 4px;

.gd-messages {
    position: fixed;
    z-index: 2;
    top: 30px;
    left: 50%;
    width: 90%;
    margin: 0;
    transform: translateX(-50%);
    pointer-events: none;
    max-width: 1000px;
    text-align: center;

    @media #{$small-only} {
        top: 30px;
    }
}

.gd-message-layout {
    margin: 15px 0 20px;
}

%gd-message-link {
    font: inherit;
    color: inherit;
    opacity: 0.85;
    cursor: pointer;

    @include active-states {
        color: inherit;
        opacity: 1;
    }
}

.gd-message-support {
    @extend %gd-message-link;

    margin-left: 10px;
    text-decoration: underline;
}

.gd-message-dismiss {
    @extend %gd-message-link;

    position: relative;
    top: 1px;
    padding: 2px;
    margin-left: 10px;

    @include active-states-and-self {
        text-decoration: none;
    }
}

%gd-message-theme-black {
    @include clearfix();

    $message-success-borderColor: #6ba145;
    $message-success-color: #2c6b00;
    $message-success-bgcolor: #d6f6c8;

    $message-error-borderColor: #d15462;
    $message-error-color: #9c2d2d;
    $message-error-bgcolor: #ffe7e7;

    $message-warning-borderColor: #d18915;
    $message-warning-color: #886407;
    $message-warning-bgcolor: #fff9de;

    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid $message-error-borderColor;
    font: 12px/1.3 $gd-font-primary;
    color: $message-error-color;
    background: $message-error-bgcolor;
    pointer-events: all;
    border-radius: 3px;
    text-align: left;

    &.error {
        // error style is default
    }

    &.success {
        color: $message-success-color;
        background: $message-success-bgcolor;
        border-color: $message-success-borderColor;
    }

    &.warning,
    &.progress {
        color: $message-warning-color;
        border-color: $message-warning-borderColor;
        background-color: $message-warning-bgcolor;
    }

    .gd-message-text {
        color: #000;
    }
}

%gd-message-overlay-theme-black {
    @extend %gd-message-theme-black;

    display: inline-block;

    @include box-shadow("0 1px 2px 0 rgba(0, 0, 0, 0.15)");

    .gd-message-support,
    .gd-message-dismiss {
        @extend %gd-message-link;

        height: auto;
        margin-left: 10px;
        text-decoration: underline;

        &::before {
            content: "dismiss";
            font-family: inherit;
        }

        @include active-states {
            text-decoration: none;
        }
    }
}

/* ==========================================================================
   Messages
   ========================================================================== */

.gd-message {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    padding: $gd-message-padding-vertical 8px $gd-message-padding-vertical 10px;
    @include clearfix();

    line-height: 1.4em;
    color: $gd-color-negative;
    background: transparentize($gd-color-negative, 0.85);
    pointer-events: all;
    max-width: 100%;
    border-radius: 3px;
    font-family: $gd-font-primary;
    font-size: 14px;
    text-align: left;

    a:not(.gd-message-dismiss) {
        color: inherit;
        text-decoration: underline;
    }

    &.progress {
        color: $gd-color-highlight;
        background: transparentize($gd-color-highlight, 0.85);
    }

    &.success {
        color: $gd-color-positive;
        background: transparentize($gd-color-positive, 0.85);
    }

    &.warning {
        color: $gd-color-warning-text;
        background: transparentize($gd-color-warning, 0.85);
    }

    &.contrast {
        &::before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: inherit;
            background-color: $gd-color-white;
        }
    }
}

.gd-message-overlay,
.gd-message.intensive {
    color: $gd-color-text-light;
    background: transparentize($gd-color-negative, 0.02);

    &.success,
    &.progress,
    &.error {
        color: $gd-color-text-light;
    }

    &.success {
        background: transparentize($gd-color-positive, 0.02);
    }

    &.progress {
        background: transparentize($gd-color-highlight, 0.02);
    }

    &.error {
        background: transparentize($gd-color-negative, 0.02);
    }

    &.warning {
        color: $gd-color-warning-label;
        background: $gd-color-warning;
    }
}

.gd-message-overlay {
    margin: 0;

    @include transition("opacity", 0.25s, "ease-in-out");
    @include box-shadow("0 1px 3px rgba(20, 56, 92, 0.1), 0 2px 9px rgba(20, 57, 93, 0.15)");

    &.is-hidden {
        opacity: 0;
    }

    &-custom {
        padding: 0;
        min-width: 620px;
        max-width: 350px;

        @media #{$small-only} {
            min-width: auto;
            max-width: auto;
        }
    }

    .gd-message-text {
        display: flex;
        align-items: center;

        > div {
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
        }

        .gd-message-support,
        .gd-message-dismiss-container {
            -ms-flex: 1 0 auto;
            flex: 1 0 auto;
        }

        &-showmore {
            & + .gd-message-dismiss-container {
                position: absolute;
                top: 5px;
                right: 5px;
            }
        }

        &-header {
            margin: 0;
            padding: 5px 10px;
        }

        &-showmorelink {
            color: rgba($color: $gd-color-text-light, $alpha: 0.85);
            cursor: pointer;
            font-size: 13px;
            text-decoration: underline;
            padding-left: 5px;

            &.warning {
                color: rgba($color: $gd-color-warning-label, $alpha: 1);
            }
        }

        &-content {
            padding: 5px 10px;
            color: rgba($color: $gd-color-text-light, $alpha: 0.85);
            font-size: 13px;
            border-top: 1px solid rgba($color: $gd-color-text-light, $alpha: 0.85);

            &.on {
                visibility: visible;
                overflow: auto;
                height: 100%;
                max-height: 100px;
            }

            &.off {
                visibility: hidden;
                height: 0;
                padding: 0;
            }

            &.warning {
                color: rgba($color: $gd-color-warning-label, $alpha: 1);
                border-color: rgba($color: $gd-color-warning-label, $alpha: 0.3);
            }
        }
    }
}