// @import "../core/core";

@mixin dc-msg {
    margin-bottom: $dc-space150;
    padding: $dc-space100 0;
    transition: transform .2s ease-out;
    border-width: $dc-border50;
    border-style: solid;
    font-size: $dc-font100;
    line-height: $dc-body-line-height;

    @media(min-width: $dc-small-width) {
        padding: $dc-space100;
    }
}

@mixin dc-msg__inner {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
}

@mixin dc-msg__icon-frame {
    min-width: 4rem;
    height: 4rem;

    @media (min-width:$dc-small-width) {
        margin-right: $dc-space100;
    }
}

@mixin dc-msg__bd {
    flex: 1 1 auto;
}

@mixin dc-msg__bd__link {
    border-bottom: 1px solid currentColor;
    color: currentColor;

    &:hover {
        border-bottom: 1px dashed currentColor;
        color: currentColor;
    }
}

@mixin dc-msg__title {
    margin: 0;
    color: currentcolor;
    font-size: $dc-font100;
    font-weight: $dc-bold-font-weight;
    line-height: $dc-body-line-height;
    text-transform: uppercase;
}

@mixin dc-msg__text {
    margin: 0;
}

@mixin dc-msg__close {
    min-width: 4rem;

    &:active {
        transform: scale(.9);
    }
}

@mixin dc-msg__close__icon {
    padding: 0 1.5rem;
    color: currentColor;
    line-height: 4rem;
    cursor: pointer;
    opacity: .5;

    &:hover {
        opacity: .7;
    }
}

@mixin dc-msg__icon {
    padding: 0 1rem;
    color: currentcolor;
    font-size: 3.2rem;
    line-height: 4rem;
}

//  = INFO MESSAGE
//  -----------------------------------------------------------------------------

@mixin dc-msg--info {
    border-color: $dc-blue60;
    background-color: $dc-blue80;
    color: $dc-blue20;
}

//  = SUCCESS MESSAGE
//  -----------------------------------------------------------------------------

@mixin dc-msg--success {
    border-color: $dc-green50;
    background-color: $dc-green80;
    color: $dc-green20;
}

//  = WARNING MESSAGE
//  -----------------------------------------------------------------------------

@mixin dc-msg--warning {
    border-color: $dc-yellow40;
    background-color: $dc-yellow80;
    color: $dc-yellow20;
}

//  = ERROR MESSAGE
//  -----------------------------------------------------------------------------

@mixin dc-msg--error {
    border-color: $dc-red70;
    background-color: $dc-red80;
    color: $dc-red20;
}

//  = ANIMATION
//  ---------------------------------------------------------------------------
@mixin dc-msg--is-animating {
    animation: dc-notify 1.6s linear 1;

    @keyframes dc-notify {
        0% {
            transform: translateY(-100%);
        }

        10% {
            transform: translateY(0);
        }

        90% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-100%);
        }
    }
}

@mixin dc-msg--is-animating-long {
    animation: dc-notify-long 6s linear 1;

    @keyframes dc-notify-long {
        0% {
            transform: translateY(-100%);
        }

        1% {
            transform: translateY(0);
        }

        99% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-100%);
        }
    }
}

@mixin dc-msg-selectors {

    .dc-msg {
        @include dc-msg;
    }

    .dc-msg__inner {
        @include dc-msg__inner;
    }

    .dc-msg__icon-frame {
        @include dc-msg__icon-frame;
    }

    .dc-msg__icon {
        @include dc-msg__icon;
    }

    .dc-msg__bd {
        @include dc-msg__bd;
    }

    .dc-msg__bd__link {
        @include dc-msg__bd__link;
    }

    .dc-msg__title {
        @include dc-msg__title;
    }

    .dc-msg__text {
        @include dc-msg__text;
    }

    .dc-msg__close {
        @include dc-msg__close;
    }

    .dc-msg__close__icon {
        @include dc-msg__close__icon;
    }

    .dc-msg--info {
        @include dc-msg--info;
    }

    .dc-msg--success {
        @include dc-msg--success;
    }

    .dc-msg--error {
        @include dc-msg--error;
    }

    .dc-msg--warning {
        @include dc-msg--warning;
    }

    .dc-msg--is-animating {
        @include dc-msg--is-animating;
    }

    .dc-msg--is-animating-long {
        @include dc-msg--is-animating-long;
    }
}