@in-message-bottom-gap: @height-fixed-bar; // due to fixed bar
@in-message-padding-horizontal: 15px;
@in-message-padding-vertical: 14px;

@in-message-close-size: 16px;
@in-message-close-color: #2a384e;
@in-message-close-color-hover: @color-blue;
@in-message-close-bg: @color-f;
@in-message-height: @input-height;

// base message settings and elements
.in-message {
    display: inline-block;
    padding: @in-message-padding-vertical @in-message-padding-horizontal;
    min-height: @in-message-height;
    border-radius: @radius;
    width: 100%;

    font-style: italic;
    font-size: 14px;
    text-transform: none;
    font-weight: normal;
    word-wrap: break-word;

    &__icon {
        margin-right: 2px;
        position: relative;
    }

    &__close {
        position: absolute;
        display: inline-block;
        height: @in-message-close-size;
        width: @in-message-close-size;
        line-height: @in-message-close-size - 4px;
        right: -@in-message-close-size/2;
        top: -@in-message-close-size/2;
        vertical-align: middle;

        border-radius: 50%;
        background-color: @in-message-close-bg;
        color: @in-message-close-color;
        font-style: normal;
        font-size: @in-message-close-size;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        text-transform: lowercase;
        cursor: pointer;

        .svg {
            font-size: @in-message-close-size;
        }

        &:hover {
            color: @in-message-close-color-hover;
            text-decoration: none;
        }
    }

    &__list {
        .reset-ul();

        li {
            padding-top: 2px;
        }
    }
}

// Modifications - types
@in-message-small-padding-horizontal: 6px;
@in-message-small-padding-vertical: 5px;

@in-message-block-margin-bottom: 10px;
@in-message-block-padding-for-close: 20px;

.in-message {
    &--small {
        padding: @in-message-small-padding-vertical @in-message-small-padding-horizontal;

        font-size: 12px;
        min-height: @in-message-height/2;
    }

    &--block {
        display: block;
        margin-bottom: @in-message-block-margin-bottom;
        padding-right: @in-message-block-padding-for-close;
        position: relative;

        &.in-message--small .in-message__close {
            top: -4px;
        }
    }
}

// Modifications - colors
.in-message {
    &--error {
        color: @color-message-alert-text;
        background: @color-message-alert;
        border: 1px solid @color-message-alert-border;
    }

    &--warning {
        color: @color-message-warning-text;
        background: @color-message-warning;
        border: 1px solid @color-message-warning-border;
    }

    &--info {
        color: @color-message-info-text;
        background: @color-message-info;
        border: 1px solid @color-message-info-border;
    }

    &--success {
        color: @color-message-success-text;
        background: @color-message-success;
        border: 1px solid @color-message-success-border;
    }

    &--danger {
        color: @color-message-alert-text;
        background: @color-message-alert;
        border: 1px solid @color-message-alert-border;
    }
}


// Modifications - special type - pinned
@in-message-pin-width: 230px;
@in-message-pin-max-width: calc(~"@{width-web} - @{width-panel} - @{content-gap}");
@in-message-pin-place-for-close: 25px;
@in-message-pin-padding: 10px;
@in-message-pin-position: 5px;
@in-message-pin-size: 8px;

.in-message {
    &--pin {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: @in-message-pin-position*2;
        margin-bottom: @in-message-bottom-gap;
        min-width: @in-message-pin-width;
        max-width: @in-message-pin-max-width;
        width: auto;
        z-index: 99;
        padding: @in-message-pin-padding @in-message-pin-place-for-close @in-message-pin-padding @in-message-pin-padding;

        text-align: left;
        border: 1px solid darken(@color-message-alert, 15%);

        &:after {
            display: block;
            position: absolute;
            top: -@in-message-pin-position;
            left: @in-message-pin-position;
            width: @in-message-pin-size;
            height: @in-message-pin-size;
            content: '';

            border-top: 1px solid darken(@color-message-alert, 15%);
            border-left: 1px solid darken(@color-message-alert, 15%);
            background: @color-message-alert;

            transform: rotate(45deg);
        }

        .box-login & {
            left: 25px;
        }
    }
}