@use '../../../../../styles/base/mixin' as mixins;

$dynamic-selector-placeholder: (
    host: (
        width: 100%,
        height: 100%,
        min-height: 10rem,
        gap: 1rem,
    ),
    icon: (
        size: 4rem,
        color: var(--clr-black-80),
    ),
    icon-warn: (
        color: var(--clr-orange-70),
    ),
    description: (
        font-size: 1rem,
        line-height: 1.25rem,
        color: var(--clr-black-60),
    ),
);

:host {
    @each $element, $elements in $dynamic-selector-placeholder {
        @each $style-token, $value in $elements {
            #{mixins.generateCssVar('dynamic-selector-placeholder', #{$element}, #{$style-token})}: #{$value};
        }
    }

    width: var(--rt-dynamic-selector-placeholder-host-width);
    height: var(--rt-dynamic-selector-placeholder-host-height);
    min-height: var(--rt-dynamic-selector-placeholder-host-min-height);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rt-dynamic-selector-placeholder-host-gap);

    .rtui-dynamic-selector-placeholder {
        &__icon {
            width: var(--rt-dynamic-selector-placeholder-icon-size);
            height: var(--rt-dynamic-selector-placeholder-icon-size);
            font-size: var(--rt-dynamic-selector-placeholder-icon-size);
            color: var(--rt-dynamic-selector-placeholder-icon-color);

            &--warn {
                color: var(--rt-dynamic-selector-placeholder-icon-warn-color);
            }
        }

        &__description {
            font-size: var(--rt-dynamic-selector-placeholder-description-font-size);
            line-height: var(--rt-dynamic-selector-placeholder-description-line-height);
            color: var(--rt-dynamic-selector-placeholder-description-color);
        }
    }
}