@use '../../styles/variables';
@use 'mixin';

.thy-empty-state {
    display: block;
    text-align: center;
    .thy-empty-icon .empty-icon {
        svg {
            color: variables.$empty-icon-color;
        }
    }

    .thy-empty-text {
        color: variables.$empty-text-color;
        &-with-extra {
            color: variables.$empty-text-color-with-extra;
        }
    }

    .thy-empty-description {
        color: variables.$empty-description-color;
        font-size: variables.$empty-description-size;
        margin-top: variables.$empty-description-margin-top;
    }

    @include mixin.set-empty-state-style(
        variables.$empty-text-size,
        variables.$empty-text-margin-top,
        variables.$empty-svg-width,
        variables.$empty-svg-height
    );

    &--lg {
        @include mixin.set-empty-state-style(
            variables.$empty-text-size-lg,
            variables.$empty-text-margin-top-lg,
            variables.$empty-svg-width-lg,
            variables.$empty-svg-height-lg
        );
    }

    &--sm {
        @include mixin.set-empty-state-style(
            variables.$empty-text-size-sm,
            variables.$empty-text-margin-top-sm,
            variables.$empty-svg-width-sm,
            variables.$empty-svg-height-sm
        );
    }
}

.thy-empty-svg-default,
.thy-empty-svg-light-default {
    display: inline-block;
}
.thy-empty-svg-dark,
.thy-empty-svg-light-dark {
    display: none;
}

:root[theme='dark'] {
    .thy-empty-svg-default,
    .thy-empty-svg-light-default {
        display: none;
    }
    .thy-empty-svg-dark,
    .thy-empty-svg-light-dark {
        display: inline-block;
    }
}
