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

$clear-button: (
    host: (
        margin: 0 0.5rem 0 0,
        padding: 0.1rem,
        background-color: var(--clr-black-20),
    ),
    icon: (
        size: 1rem,
        color: var(--clr-black-60),
    ),
    icon-hover: (
        color: var(--clr-black-100),
    ),
);

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

    .rtui-clear-button {
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        border-radius: 50%;
        margin: var(--rt-clear-button-host-margin);
        padding: var(--rt-clear-button-host-padding);
        background-color: var(--rt-clear-button-host-background-color);

        &--invisible {
            @include mixins.visually-hidden();
        }

        &__icon {
            width: var(--rt-clear-button-icon-size);
            height: var(--rt-clear-button-icon-size);
            font-size: var(--rt-clear-button-icon-size);
            color: var(--rt-clear-button-icon-color);

            &:hover {
                color: var(--rt-clear-button-icon-hover-color);
            }
        }
    }
}