@import 'commons';

@mixin m-message-skin-default($color) {
    .m-message {
        &__wrap {
            border-left: $m-border-width-lg solid $color;
        }

        &__icon {
            color: $color;
        }
    }
}

@mixin m-message-skin-light($color) {
    .m-message {
        &__icon,
        &__title {
            color: $color;
        }
    }
}

.m-message {
    --m-message-background: #{$m-color-grey-lightest};
}

.m-message.m--is-skin-default {

    &.m--is-state-confirmation {
        @include m-message-skin-default($m-color-success);
    }

    &.m--is-state-information {
        @include m-message-skin-default($m-color-interactive);
    }

    &.m--is-state-warning {
        @include m-message-skin-default($m-color-warning);
    }

    &.m--is-state-error {
        @include m-message-skin-default($m-color-error);
    }

    + .m-message {
        margin-top: $m-space;
    }

    .m-message {
        &__wrap {
            display: flex;
            padding: $m-space;
            background: var(--m-message-background);
            border-radius: 0 $m-border-radius $m-border-radius 0;
            
            > :not(:first-child) {
                margin-left: $m-space;
            }
        }

        &__icon {
            justify-content: center;

            svg {
                @include m-font-size('h2');
            }
        }

        &__body {
            display: flex;
            justify-content: center;
            flex-direction: column;
            width: calc(100% - (var(--m-font-size-h2) * 1px));

            &.m--has-close-button {
                padding-right: $m-touch-size;
                position: relative;
            }

            &__close-button {
                position: absolute;
                top: 0;
                right: 0;
                z-index: 0;

                .m-button__icon .m-icon {
                    @include m-font-size('xs');
                    height: #{$m-font-size-xs * 1px};
                }
            }
        }

        &__title {
            @include m-font-size('md');

            + .m-message__text {
                margin-top: $m-space-2xs;
            }
        }
    }
}

.m-message.m--is-skin-light {
    &.m--is-state-confirmation {
        @include m-message-skin-light($m-color-success);
    }

    &.m--is-state-information {
        @include m-message-skin-light($m-color-interactive);
    }

    &.m--is-state-warning {
        @include m-message-skin-light($m-color-warning);
    }

    &.m--is-state-error {
        @include m-message-skin-light($m-color-error);
    }

    + .m-message {
        margin-top: $m-space-2xs;
    }

    .m-message {
        &__wrap {
            display: inline-flex;
            align-items: flex-start;
            
            > :not(:first-child) {
                margin-left: $m-space-xs;
            }
        }

        &__icon {
            align-items: center;
            min-height: 1.25em; // Magic number
            min-width: 18px; // Magic number

            .m-icon {
                width: #{$m-font-size-md * 1px};

                @include m-font-size('md');
            }
        }

        &__body {
            margin-top: 1px; // Magic number: align text with icon
            align-self: flex-start;
            width: calc(100% - #{$m-font-size-md + $m-space-xs});
        }

        &__title {
            @include m-font-size();
        }
    }
}

.m-message {
    text-align: left;

    &__wrap {
        position: relative;
    }

    &__icon {
        display: flex;
        align-items: center;
        flex-shrink: 0;

        .m-icon {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    &__body {
        position: relative;
        flex: 1 1 auto;
    }

    &__title {
        margin-top: 0;
    }

    &__text {
        position: relative;

        > :first-child {

            &,
            > :first-child {
                margin-top: 0;
            }
        }
    }
}