@use '../../variables' as *;

$b: '.warning-message';

#{$b} {
    align-items: flex-start;
    background-color: $warning-message-bg;
    border-radius: $warning-message-radius;
    box-shadow: $warning-message-shadow;
    color: $warning-message-color;
    display: flex;
    padding: 16px 16px 24px;

    @include dark-border;

    @media (--tablet-landscape-up) {
        padding: 24px 24px 32px;
    }

    &_small {
        box-shadow: $warning-message-small-shadow;
        padding: 16px 16px 24px;

        &:has(#{$b}__content:last-child #{$b}__descr:first-child) {
            padding-bottom: 20px;
        }
    }

    &_success {
        color: $warning-message-success-color;
    }

    &_info {
        color: $warning-message-info-color;
    }

    &_light-info {
        color: $warning-message-light-info-color;
    }

    &_error {
        color: $warning-message-error-color;
    }

    &_solid {
        background-color: $warning-message-solid-bg;
        color: $warning-message-solid-color;

        &#{$b}_success {
            background-color: $warning-message-solid-success-bg;
            color: $warning-message-solid-success-color;
        }

        &#{$b}_info {
            background-color: $warning-message-solid-info-bg;
            color: $warning-message-solid-info-color;
        }

        &#{$b}_light-info {
            background-color: $warning-message-solid-light-info-bg;
            color: $warning-message-solid-light-info-color;
        }

        &#{$b}_error {
            background-color: $warning-message-solid-error-bg;
            color: $warning-message-solid-error-color;
        }
    }

    &__icon {
        fill: $warning-message-icon-color;
        flex-shrink: 0;
        height: 24px;
        margin-right: 8px;
        width: 24px;

        #{$b}_small & {
            height: 20px;
            width: 20px;
        }

        #{$b}_solid & {
            fill: $warning-message-solid-icon-color;
        }

        #{$b}_success & {
            fill: $warning-message-success-icon-color;
        }

        #{$b}_solid#{$b}_success & {
            fill: $warning-message-solid-success-icon-color;
        }

        #{$b}_info & {
            fill: $warning-message-info-icon-color;
        }

        #{$b}_solid#{$b}_info & {
            fill: $warning-message-solid-info-icon-color;
        }

        #{$b}_light-info & {
            fill: $warning-message-light-info-icon-color;
        }

        #{$b}_solid#{$b}_light-info & {
            fill: $warning-message-solid-light-info-icon-color;
        }

        #{$b}_error & {
            fill: $warning-message-error-icon-color;
        }

        #{$b}_solid#{$b}_error & {
            fill: $warning-message-solid-error-icon-color;
        }
    }

    &__wrapper {
        align-items: center;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        position: relative;
        top: 2px;

        @media (--tablet-landscape-up) {
            flex-direction: row;
        }

        #{$b}_small & {
            top: 3px;
        }
    }

    &__content {
        flex-grow: 1;

        @media (--tablet-portrait-down) {
            text-align: center;
        }

        #{$b}__icon + #{$b}__wrapper & {
            @media (--tablet-portrait-down) {
                text-align: left;
            }
        }
    }

    &__title {
        @include font($warning-message-title-font);

        #{$b}_small & {
            @include font($warning-message-small-title-font);
        }
    }

    &__descr {
        color: $warning-message-descr-color;

        @include font($warning-message-descr-font);

        &:not(:first-child) {
            margin-top: 4px * 2;
        }

        #{$b}_small & {
            @include font($warning-message-small-descr-font);
        }

        #{$b}_solid & {
            color: inherit;
        }
    }

    &__action {
        flex-shrink: 0;
        margin-top: 16px;

        @media (--tablet-landscape-up) {
            margin-left: 24px;
            margin-top: 0;
        }
    }
}