@use '../../assets/styles/index' as *;

.root {
    --uui-filters_toggler-bg: var(--uui-control-bg);
    --uui-filters_toggler-bg-hover: var(--uui-neutral-5);
    --uui-filters_toggler-border: var(--uui-control-border);
    --uui-filters_toggler-border-hover: var(--uui-control-border-hover);
    --uui-filters_toggler-icon: var(--uui-icon);
    --uui-filters_toggler-shadow: none;
    --uui-filters_toggler-text: var(--uui-text-primary);

    --uui-filters_toggler-title: var(--uui-text-tertiary);
    --uui-filters_toggler-title-font: var(--uui-font);
    --uui-filters_toggler-title-font-weight: 400;
    --uui-filters_toggler-title-font-style: normal;

    --uui-filters_toggler-selection: var(--uui-text-primary);
    --uui-filters_toggler-selection-font: var(--uui-font);
    --uui-filters_toggler-selection-font-weight: 400;
    --uui-filters_toggler-selection-font-style: normal;

    --uui-filters_toggler-postfix: var(--uui-text-primary);
    --uui-filters_toggler-postfix-font: var(--uui-font);
    --uui-filters_toggler-postfix-font-weight: 400;
    --uui-filters_toggler-postfix-font-style: normal;

    --uui-filters_toggler-border-radius: var(--uui-border-radius);

    --uui-filters_toggler-font: var(--uui-font);
    --uui-filters_toggler-font-weight: 400;

    --uui-filters_toggler-min-height: var(--uui-size);
    --uui-filters_toggler-border-width: var(--uui-border-width);
    --uui-filters_toggler-horizontal-padding: calc(var(--uui-horizontal-padding) - var(--uui-filters_toggler-border-width));
    --uui-filters_toggler-caption-horizontal-padding: var(--uui-horizontal-gap);
    --uui-filters_toggler-icon-size: var(--uui-icon-size);
    //
    display: flex;
    flex: 0 0 auto;
    align-items: center;

    &:global(.uui-input-box) {
        box-sizing: border-box;
        min-width: 40px;
        min-height: var(--uui-filters_toggler-min-height);
        position: relative;
        display: flex;
        outline: none;
        border: var(--uui-filters_toggler-border-width) solid var(--uui-filters_toggler-border);
        border-radius: var(--uui-filters_toggler-border-radius);
        background-color: var(--uui-filters_toggler-bg);
        box-shadow: var(--uui-filters_toggler-shadow);
        padding-left: var(--uui-filters_toggler-horizontal-padding);
        padding-right: var(--uui-filters_toggler-horizontal-padding);

        &:global(.-clickable):hover {
            cursor: pointer;
        }

        &:hover, &:focus {
            border-color: var(--uui-filters_toggler-border-hover);
            background-color: var(--uui-filters_toggler-bg-hover);
        }

        &:global(.uui-opened) {
            border-color: var(--uui-filters_toggler-border-hover);
            background-color: var(--uui-filters_toggler-bg-hover);
        }

        :global(.uui-icon-dropdown) {
            fill: var(--uui-filters_toggler-icon);
        }

        .title-wrapper {
            font-family: var(--uui-filters_toggler-font);
            font-weight: var(--uui-filters_toggler-font-weight, normal);
            display: flex;
            align-items: center;
            flex: 1 1 auto;
            min-width: 0;
            outline: none;
            background: none;
            cursor: pointer;
            white-space: nowrap;
            padding-left: 6px;
            padding-right: 6px;

            .title {
                color: var(--uui-filters_toggler-title);
                font-family: var(--uui-filters_toggler-title-font);
                font-weight: var(--uui-filters_toggler-title-font-weight);
                font-style: var(--uui-filters_toggler-title-font-style);
                font-size: var(--uui-font-size);
                line-height: var(--uui-line-height);
                display: flex;
                text-overflow: initial;
                overflow: visible;
                padding-top: 0;
                padding-bottom: 0;
            }

            .text-wrapper {
                display: flex;
                overflow: hidden;
                align-items: center;
                width: 100%;
                padding-left: 3px;
            }

            .selection {
                color: var(--uui-filters_toggler-selection);
                font-family: var(--uui-filters_toggler-selection-font);
                font-weight: var(--uui-filters_toggler-selection-font-weight);
                font-style: var(--uui-filters_toggler-selection-font-style);
                font-size: var(--uui-font-size);
                line-height: var(--uui-line-height);
                padding-top: 0;
                padding-bottom: 0;
                flex-shrink: 1;
                flex-basis: auto;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;

                & + span {
                    color: var(--uui-filters_toggler-selection);
                }
            }

            .postfix {
                color: var(--uui-filters_toggler-postfix);
                font-family: var(--uui-filters_toggler-postfix-font);
                font-weight: var(--uui-filters_toggler-postfix-font-weight);
                font-style: var(--uui-filters_toggler-postfix-font-style);
                font-size: var(--uui-font-size);
                line-height: var(--uui-line-height);
                padding-top: 0;
                padding-bottom: 0;
                overflow: visible;
                flex-shrink: 0;
            }

            .selected {
                color: var(--uui-filters_toggler-text);
            }
        }

        :global(.uui-icon) {
            svg {
                height: var(--uui-filters_toggler-icon-size);
                width: inherit;
            }
        }
    }
}
