@use '../../styles/mixins.scss';

.empty-state {
    $block: &;
    padding: 20px;

    &_size_m {
        height: 400px;
    }

    &__wrapper {
        display: grid;
        grid-template-areas: 'image content';
        grid-template-columns: auto 1fr;

        &_size_xs {
            width: 321px;
            height: 100px;
            #{$block}__image {
                margin-right: var(--g-spacing-5);
            }
        }
        &_size_s {
            width: 460px;
            height: 120px;
        }

        &_size_m {
            width: 600px;
            height: 230px;
        }

        &_size_l {
            width: 900px;
            min-height: 280px;
        }

        &_position_center {
            position: relative;

            margin: 0 auto;
        }
        &_position_left {
            margin: unset;
        }
    }

    &__image {
        grid-area: image;
        justify-self: end;

        margin-right: var(--g-spacing-10);

        color: var(--g-color-base-info-light-hover);

        .g-root_theme_dark & {
            color: var(--g-color-base-generic);
        }
    }

    &__title {
        font-weight: 500;

        &_size_s {
            @include mixins.lead-typography();
        }

        &_size_m {
            @include mixins.header-2-typography();
        }

        &_size_l {
            @include mixins.subheader-3-typography();
        }
    }

    &__description {
        @include mixins.body-2-typography();
    }

    &__content {
        align-self: center;
        grid-area: content;

        &_position-top {
            align-self: start;

            padding-top: 50px;
        }
    }
}