// /**
//  * Copyright Â© Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Messages
//  _____________________________________________

.lib-message(@_message-type: info) {
    @_message-background: "message-@{_message-type}__background";
    @_message-border-color: "message-@{_message-type}__border-color";
    @_message-color: "message-@{_message-type}__color";
    @_message-link-color: "message-@{_message-type}-link__color";
    @_message-link-color-hover: "message-@{_message-type}-link__color-hover";
    @_message-link-color-active: "message-@{_message-type}-link__color-active";
    @_message-icon-top: "message-@{_message-type}-icon__top";
    @_message-icon-right: "message-@{_message-type}-icon__right";
    @_message-icon-bottom: "message-@{_message-type}-icon__bottom";
    @_message-icon-left: "message-@{_message-type}-icon__left";
    ._lib-message();
    ._lib-message-style(
        @_message-color: @@_message-color,
        @_message-background: @@_message-background,
        @_message-link-color: @@_message-link-color,
        @_message-link-color-hover: @@_message-link-color-hover,
        @_message-link-color-active: @@_message-link-color-active,
        @_message-border-color: @@_message-border-color
    );
}

._lib-message(
    @_message-padding: @message__padding,
    @_message-margin: @message__margin,
    @_message-border-radius: @message__border-radius
) {
    .lib-css(border-radius, @_message-border-radius);
    .lib-css(margin, @_message-margin);
    .lib-css(padding, @_message-padding);
    display: block;
    .lib-typography(
        @_color: @message__color,
        @_font-size: @message__font-size,
        @_font-family: @message__font-family,
        @_font-weight: @message__font-weight,
        @_font-style: @message__font-style,
        @_line-height: @message__line-height
    );
    ._lib-message-border(@message__border-width, @message__border-style);
}

._lib-message-style(
    @_message-background: @message-info__background,
    @_message-color: @message-info__color,
    @_message-link-color: @message-info-link__color,
    @_message-link-color-hover: @message-info-link__color-hover,
    @_message-link-color-active: @message-info-link__color-active,
    @_message-border-color: @message-info__border-color
) {
    .lib-css(background, @_message-background);
    .lib-css(border-color, @_message-border-color);
    .lib-css(color, @_message-color);

    a {
        .lib-css(color, @_message-link-color);

        &:hover {
            .lib-css(color, @_message-link-color-hover);
        }

        &:active {
            .lib-css(color, @_message-link-color-active);
        }
    }
}

._lib-message-border(
    @_message-border-width: @message__border-width,
    @_message-border-style: @message__border-style
) when not (@_message-border-width = 0)
and not (@_message-border-width = false)
and not (@_message-border-style = false) {
    .lib-css(border, @_message-border-width @_message-border-style);
}

//  Messages with lateral icon
.lib-message-icon-lateral(@_message-type: info, @_message-position: right) {
    .lib-message(@_message-type);
    @_message-icon-position: @_message-position;
    @_message-icon: "message-@{_message-type}-icon";
    @_message-icon-color: "message-@{_message-type}-icon__color-lateral";
    @_message-icon-background: "message-@{_message-type}-icon__background";
    @_message-icon-top: "message-@{_message-type}-icon__top";
    @_message-icon-right: "message-@{_message-type}-icon__right";
    @_message-icon-bottom: "message-@{_message-type}-icon__bottom";
    @_message-icon-left: "message-@{_message-type}-icon__left";
    ._lib-message-icon-lateral(
        @_message-icon-position,
        @@_message-icon,
        @@_message-icon-color,
        @@_message-icon-background,
        @@_message-icon-top,
        @@_message-icon-left,
        @@_message-icon-bottom,
        @@_message-icon-right
    );
}

//  Messages with inner icon
.lib-message-icon-inner(@_message-type: info) {
    .lib-message(@_message-type);
    @_message-icon: "message-@{_message-type}-icon";
    @_message-icon-color: "message-@{_message-type}-icon__color-inner";
    @_message-icon-background: "message-@{_message-type}-icon__background";
    @_message-icon-top: "message-@{_message-type}-icon__top";
    @_message-icon-right: "message-@{_message-type}-icon__right";
    @_message-icon-bottom: "message-@{_message-type}-icon__bottom";
    @_message-icon-left: "message-@{_message-type}-icon__left";
    ._lib-message-icon-inner(
        @@_message-icon,
        @@_message-icon-color,
        @@_message-icon-background,
        @@_message-icon-top,
        @@_message-icon-left,
        @@_message-icon-bottom,
        @@_message-icon-right
    );
}

//  Private mixins
._lib-message-icon-lateral(
    @_message-icon-position,
    @_message-icon,
    @_message-icon-color,
    @_message-icon-background,
    @_message-icon-top,
    @_message-icon-left,
    @_message-icon-bottom,
    @_message-icon-right
) {
    position: relative;

    &:before {
        .lib-css(background, @_message-icon-background);
        .lib-css(width, @message-icon__lateral-width);
        content: '';
        display: block;
        height: 100%;
        padding: 0;
        position: absolute;
        text-align: center;
        top: 0;
    }

    > *:first-child {
        &:before {
            .lib-css(margin-top, -@message-icon__lateral-arrow-size);
            content: '';
            overflow: hidden;
            position: absolute;
            top: 50%;
        }
    }

    > *:first-child {
        &:after {
            ._lib-icon-font(
                @_icon-font-content: @_message-icon,
                @_icon-font: @icon-font,
                @_icon-font-size: @message-icon__font-size,
                @_icon-font-line-height: @message-icon__font-line-height,
                @_icon-font-color: @_message-icon-color,
                @_icon-font-margin: -@message-icon__font-size/2 0 0,
                @_icon-font-vertical-align: @icon-font__vertical-align
            );
            .lib-css(bottom, @_message-icon-bottom);
            .lib-css(left, @_message-icon-left);
            .lib-css(right, @_message-icon-right);
            .lib-css(top, @_message-icon-top);
            .lib-css(width, @message-icon__lateral-width);
            position: absolute;
            text-align: center;
        }
    }

    ._lib-message-icon-lateral-position(
        @_message-icon-position,
        @_message-icon-background
    );
}

._lib-message-icon-lateral-position(
    @_message-icon-position,
    @_message-icon-background
) when (@_message-icon-position = right) {
    .lib-css(padding-right, @message-icon__lateral-width + @indent__s);

    &:before {
        right: 0;

        ._lib-message-icon-lateral-border-radius(@_message-icon-position);
    }

    > *:first-child {
        &:before {
            .lib-arrow(left, @message-icon__lateral-arrow-size, @_message-icon-background);
            .lib-css(right, @message-icon__lateral-width);
        }
    }

    > *:first-child {
        &:after {
            right: 0;
        }
    }
}

._lib-message-icon-lateral-position(
    @_message-icon-position,
    @_message-icon-background
) when (@_message-icon-position = left) {
    .lib-css(padding-left, @message-icon__lateral-width + @indent__s);

    &:before {
        left: 0;
        ._lib-message-icon-lateral-border-radius(@_message-icon-position);
    }

    > *:first-child:before {
        .lib-arrow(right, @message-icon__lateral-arrow-size, @_message-icon-background);
        .lib-css(left, @message-icon__lateral-width);
    }

    > *:first-child:after {
        left: 0;
    }
}

._lib-message-icon-lateral-border-radius(
    @_message-icon-position
) when (@_message-icon-position = left) and not (@message__border-radius = false) and not (@message__border-width = false) {
    .lib-css(border-radius, (@message__border-radius - @message__border-width) 0 0 (@message__border-radius - @message__border-width));
}

._lib-message-icon-lateral-border-radius(
    @_message-icon-position
) when (@_message-icon-position = right) and not (@message__border-radius = false) and not (@message__border-width = false) {
    .lib-css(border-radius, 0 (@message__border-radius - @message__border-width) (@message__border-radius - @message__border-width) 0);
}

._lib-message-icon-inner(
    @_message-icon,
    @_message-icon-color,
    @_message-icon-background,
    @_message-icon-top,
    @_message-icon-left,
    @_message-icon-bottom,
    @_message-icon-right
) {
    .lib-css(padding-left, @message-icon__inner-padding-left);
    position: relative;

    > *:first-child:before {
        ._lib-icon-font(
            @_icon-font-content: @_message-icon,
            @_icon-font: @icon-font,
            @_icon-font-size: @message-icon__font-size,
            @_icon-font-line-height: @message-icon__font-line-height,
            @_icon-font-color: @_message-icon-color,
            @_icon-font-margin: -@message-icon__font-size/2 0 0,
            @_icon-font-vertical-align: @icon-font__vertical-align
        );
        .lib-css(bottom, @_message-icon-bottom);
        .lib-css(left, @_message-icon-left);
        .lib-css(right, @_message-icon-right);
        .lib-css(top, @_message-icon-top);
        .lib-css(width, @message-icon__inner-padding-left);
        position: absolute;
        text-align: center;
    }
}
