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

$b: '.empty-list';

#{$b} {
    background-color: $empty-list-bg;
    border-radius: $empty-list-radius;
    display: flex;
    flex-direction: column;
    padding: 4px * 6 4px * 4;

    @include dark-border;

    @media (--tablet-landscape-up) {
        align-items: center;
        flex-direction: row;
        padding: 4px * 10 4px * 6;
    }

    &_shadow {
        box-shadow: $shadow;
    }

    &__icon {
        align-self: center;
        fill: $empty-list-icon-color;
        flex-shrink: 0;
        margin-bottom: 4px * 6;
        width: 4px * 30;

        @media (--tablet-landscape-up) {
            margin-bottom: 0;
            margin-right: 4px * 12;
            width: 4px * 60;
        }
    }

    &__content {
        flex-grow: 1;
    }

    &__title {
        margin-bottom: 4px * 4;

        @include font($empty-list-title-mobile-font);

        @media (--tablet-landscape-up) {
            @include font($empty-list-title-desktop-font);
        }
    }

    &__descr {
        max-width: 4px * 150;
    }

    &__action {
        margin-top: 4px * 4;
    }

    &__footer {
        border-top: $empty-list-footer-separator-width solid $empty-list-footer-separator-color;
        margin-top: 4px * 4;
        padding-top: 4px * 4;
    }

    &__action-list {
        #{$b}__descr + & {
            margin-top: 4px * 4;
        }
    }

    &__action-item {
    }

    &__action-link {
        align-items: center;
        display: flex;
        padding-bottom: 4px * 2;
        padding-top: 4px * 2;
    }

    &__action-icon {
        fill: $empty-list-action-icon-color;
        flex-shrink: 0;
        height: 4px * 6;
        margin-right: 4px * 2;
        transition-duration: var(--duration-micro-s);
        transition-property: color;
        transition-timing-function: var(--easing-standard);
        width: 4px * 6;

        #{$b}__action-link:hover &,
        #{$b}__action-link:focus-visible & {
            fill: $empty-list-action-icon-active-color;
        }
    }
}