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

$dynamic-selector: (
    item: (
        height: 3rem,
        background-color: var(--mat-option-selected-state-layer-color),
        border-radius: 0.3125rem,
        margin-bottom: 0.5rem,
        padding: 0 0.25rem 0 1rem,
    ),
    item-draggable: (
        padding: 0 0.25rem 0 0.25rem,
    ),
    item-mover: (
        padding: 0 0.25rem 0 0,
        border-right: 1px solid var(--clr-black-30),
        margin-right: 0.75rem,
    ),
    item-control: (
        padding: 0 0.25rem 0 0.25rem,
        border-right: 1px solid var(--clr-black-30),
        gap: 0.5rem,
    ),
    item-control-last-child: (
        padding: 0 0 0 0.25rem,
        border-right: none,
    ),
    item-control-button-active: (
        color: var(--clr-red-100),
    ),
    item-control-icon: (
        size: 1.125rem,
    ),
    item-drag-preview: (
        box-shadow: 0 0.5rem 1rem 0 var(--clr-black-60),
    ),
);

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

.rtui-dynamic-selector {
    &__item {
        height: var(--rt-dynamic-selector-item-height);
        display: flex;
        justify-content: flex-start;
        align-items: center;

        background-color: var(--rt-dynamic-selector-item-background-color);
        border-radius: var(--rt-dynamic-selector-item-border-radius);
        margin-bottom: var(--rt-dynamic-selector-item-margin-bottom);
        padding: var(--rt-dynamic-selector-item-padding);

        &::-webkit-scrollbar {
            display: none;
        }

        &--draggable {
            padding: var(--rt-dynamic-selector-item-draggable-padding);
        }

        &-mover {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: var(--rt-dynamic-selector-item-mover-padding);
            border-right: var(--rt-dynamic-selector-item-mover-border-right);
            margin-right: var(--rt-dynamic-selector-item-mover-margin-right);
        }

        &-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &-input {
            width: 100%;
            height: 100%;
        }

        &-controls {
            display: flex;
            align-items: center;
            margin-left: auto;
        }

        &-control {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--rt-dynamic-selector-item-control-gap);
            padding: var(--rt-dynamic-selector-item-control-padding);
            border-right: var(--rt-dynamic-selector-item-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);
            }

            &-button {
                display: flex;
                justify-content: center;
                align-items: center;

                .mat-icon {
                    width: var(--rt-dynamic-selector-item-control-icon-size);
                    height: var(--rt-dynamic-selector-item-control-icon-size);
                    font-size: var(--rt-dynamic-selector-item-control-icon-size);
                }

                &--active {
                    .mat-icon {
                        color: var(--rt-dynamic-selector-item-control-button-active-color);
                    }
                }

                &--draggable {
                    cursor: move;
                }
            }
        }
    }

    &__actions {
        display: flex;
        align-items: center;
    }
}