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

$shadow: 0 1px 3px 0 rgba(29, 30, 38, 0.15);

@mixin picker-toggler-vertical-layout($size, $borderWidth) {
    &:global(.uui-input-box) {
        min-height: $size;
        border-width: $borderWidth;
    }

    :global(.uui-input) {
        @include text-size($size);

        @if ($size == 24px) {
            padding-top: 0;
            padding-bottom: 0;
        } @else if ($size == 30px) {
            padding-top: 3px;
            padding-bottom: 3px;
        } @else if ($size == 36px or $size == 42px) {
            padding-top: 6px;
            padding-bottom: 6px;
        } @else if ($size == 48px) {
            padding-top: 9px;
            padding-bottom: 9px;
        }
    }

    :not(:global(.uui-button-box)) > :global(.uui-icon) {
        height: $size - 6px;
        margin-bottom: 2px;
    }
}

.root {
    padding-top: 2px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    box-sizing: border-box;
    border-style: solid;

    &.mode-form {
        background-color: var(--uui-picker-toggler-bg);
        border-color: var(--uui-picker-toggler-border);
        fill: var(--uui-picker-toggler-icon);
        border-radius: var(--uui-picker-toggler-border-radius);

        :global(.uui-icon):global(.-clickable), :global(.uui-icon-dropdown) {
            &:global(.uui-enabled) {
                fill: var(--uui-picker-toggler-icon-clickable);

                &:hover {
                    fill: var(--uui-picker-toggler-icon-clickable-hover);
                }
            }

            &:global(.uui-disabled) {
                fill: var(--uui-picker-toggler-icon-disabled);
            }
        }

        &:hover {
            border-color: var(--uui-picker-toggler-border-hover);
        }

        &:global(.uui-focus) {
            border-color: var(--uui-picker-toggler-border-active);
            outline: none;
        }
    }

    &.mode-cell {
        background-color: transparent;
        border-color: transparent;
        fill: var(--uui-picker-toggler-icon);

        :global(.uui-icon):global(.-clickable), :global(.uui-icon-dropdown) {
            cursor: pointer;

            &:global(.uui-enabled) {
                fill: transparent;
            }

            &:global(.uui-disabled) {
                fill: transparent;
            }
        }

        &:hover {
            :global(.uui-icon):global(.-clickable), :global(.uui-icon-dropdown) {
                &:global(.uui-enabled) {
                    fill: var(--uui-picker-toggler-icon-clickable);

                    &:hover {
                        fill: var(--uui-picker-toggler-icon-clickable-hover);
                    }
                }

                &:global(.uui-disabled) {
                    fill: transparent;
                }
            }
        }

        &:global(.uui-focus) {
            outline: none;
        }
    }

    &.mode-inline {
        background-color: initial;
        border-color: transparent;
        border-radius: var(--uui-picker-toggler-border-radius);
        fill: var(--uui-picker-toggler-icon-clickable);

        &:hover {
            border-color: var(--uui-picker-toggler-border-hover);
        }

        &:global(.uui-focus) {
            border-color: var(--uui-picker-toggler-border-active);
            outline: none;
        }
    }

    &:global(.uui-invalid) {
        &.mode-form {
            border-color: var(--uui-picker-toggler-border-error);
        }
    }

    &:global(.uui-readonly) {
        @include readonly-input();

        :global(.uui-icon-dropdown), :global(.uui-icon-cancel) {
            visibility: hidden;
        }
    }

    &:global(.uui-disabled) {
        @include disabled-input();
        fill: var(--uui-picker-toggler-icon-disabled);

        :global(.uui-input) {
            cursor: default;

            &::placeholder {
                color: var(--uui-picker-toggler-text-disabled);
            }
        }

        :global(.uui-icon-dropdown), :global(.uui-icon-cancel) {
            visibility: hidden;
        }
    }

    :global(.uui-input) {
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 2px;
        font-family: var(--uui-picker-toggler-font);
        font-weight: var(--uui-picker-toggler-font-weight, normal);
        color: var(--uui-picker-toggler-text);

        &::placeholder {
            color: var(--uui-picker-toggler-placeholder);
        }

        &::-moz-placeholder {
            opacity: 1;
        }
    }

    :global(.uui-caption) {
        @include overflow-ellipsis();
        font-family: var(--uui-picker-toggler-font);
        font-weight: var(--uui-picker-toggler-font-weight, normal);
        align-self: center;
        white-space: nowrap;
    }

    :global(.uui-button-box) {
        margin-right: 3px;
        margin-bottom: 2px;

        &:last-of-type {
            margin-right: 0;
        }
    }

    :global(.uui-placeholder) {
        color: var(--uui-picker-toggler-text);
    }

    :global(.uui-placeholder)::placeholder {
        color: var(--uui-picker-toggler-text);
    }

    :global(.uui-placeholder)::-moz-placeholder {
        opacity: 1;
    }

    :global(.uui-icon-cancel) {
        margin-left: 6px;
    }

    // Sizes
    &.size-24 {
        @include picker-toggler-vertical-layout(24px, 1px);
        min-width: 24px;
    }

    &.size-30 {
        @include picker-toggler-vertical-layout(30px, 1px);
        min-width: 30px;
    }

    &.size-36 {
        @include picker-toggler-vertical-layout(36px, 1px);
        min-width: 36px;
    }

    &.size-42 {
        @include picker-toggler-vertical-layout(42px, 1px);
        min-width: 42px;
    }

    &.size-48 {
        @include picker-toggler-vertical-layout(48px, 1px);
        min-width: 48px;
    }
}
