@use '../function' as *;
@use '../settings';
@use 'sass:color';

@mixin roolith-message() {
    .message {
        font-size: rem(14);
        line-height: 1.5;
        padding: rem(17) rem(30) rem(17) rem(20);
        border-radius: var(--r-message-radius);
        margin-top: rem(10);
        margin-bottom: rem(10);
        background: var(--r-color-light-darken-2);
        position: relative;
        text-align: left;
    }

    .message-extra-pad {
        padding: rem(27) rem(30);
    }

    .message-close {
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        border: none;
        text-align: center;
        font-size: var(--r-message-color-icon-size);
        line-height: var(--r-message-color-icon-size);
        width: var(--r-message-color-icon-size);
        height: var(--r-message-color-icon-size);
        padding: rem(8) rem(10);
        z-index: 2;
        cursor: pointer;
        color: var(--r-message-close-color);
        background: transparent;
        border: none;
        font-size: rem(18);
    }

    @each $name, $value in settings.$colors {
        @if ($name != white) {
            .message-#{'' + $name} {
                background: var(--r-color-#{$name});
                background: linear-gradient(
                    to bottom,
                    color-lighten(var(--r-color-#{$name}), 5%) 0%,
                    var(--r-color-#{$name}) 100%
                );
                color: var(--r-color-white);

                .message-close {
                    color: var(--r-color-white);
                }
            }
        }
    }

    @each $name, $value in settings.$colors {
        @if ($name != white) {
            .message-#{'' + $name}-outline {
                background: transparent;
                color: var(--r-color-#{$name});
                border: rem(1) solid var(--r-color-#{$name});
                padding: rem(14) rem(17);
            }
        }
    }
}