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

$dynamic-selector-list-actions: (
    host: (
        padding-right: 0.25rem,
    ),
    control: (
        padding: 0 0.25rem 0 0.25rem,
        border-right: none,
    ),
    control-last-child: (
        padding: 0 0 0 0.25rem,
        border-right: none,
    ),
    item-icon: (
        size: 1.125rem,
    ),
    item-active: (
        color: var(--clr-red-100),
    ),
);

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

    display: flex;
    align-items: center;
    margin-left: auto;
    padding-right: var(--rt-dynamic-selector-list-actions-host-padding-right);

    .rtui-dynamic-selector-list-actions {
        display: flex;
        align-items: center;
        margin-left: auto;
        padding-right: var(--rt-dynamic-selector-list-actions-padding-right);

        &__control {
            padding: var(--rt-dynamic-selector-list-actions-control-padding);
            border-right: var(--rt-dynamic-selector-list-actions-control-border-right);

            &:last-child {
                padding: var(--rt-dynamic-selector-item-control-last-child-padding);
                border-right: var(--rt-dynamic-selector-item-control-last-child-border-right);
            }
        }

        &__item {
            &--active {
                color: var(--rt-dynamic-selector-list-actions-item-active-color);
            }

            &-icon {
                width: var(--rt-dynamic-selector-list-actions-item-icon-size);
                height: var(--rt-dynamic-selector-list-actions-item-icon-size);
                font-size: var(--rt-dynamic-selector-list-actions-item-icon-size);
            }
        }
    }
}