@import './index';

.@{select-prefix-cls}-single {
    // ========================= Selector =========================
    .@{select-prefix-cls}-selector {
        display: flex;

        .@{select-prefix-cls}-selection-search {
            position: absolute;
            top: 0;
            right: @select-input-padding-horizontal-base;
            bottom: 0;
            left: @select-input-padding-horizontal-base;
            display: inline-flex;

            &-input {
                width: 100%;
            }
        }

        .@{select-prefix-cls}-selection-item,
        .@{select-prefix-cls}-selection-placeholder {
            padding: 0;
            line-height: @select-height-without-border;
            transition: all .3s;

            // Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
            @supports (-moz-appearance: meterbar) {
                & {
                    line-height: @select-height-without-border;
                }
            }
        }

        .@{select-prefix-cls}-selection-item {
            position: relative;
            user-select: none;
            color: ~'@{@{select-selecter-selected-tp}-default-color}';
            &:hover {
                color: ~'@{@{select-selecter-selected-tp}-hover-color}';
            }
        }

        .@{select-prefix-cls}-selection-placeholder {
            pointer-events: none;
        }

        // For common baseline align
        &::after,
        // For '' value baseline align
        .@{select-prefix-cls}-selection-item::after,
        // For undefined value baseline align
        .@{select-prefix-cls}-selection-placeholder::after {
            display: inline-block;
            width: 0;
            visibility: hidden;
            content: '\a0';
        }
    }

    // With arrow should provides `padding-right` to show the arrow
    &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
        right: @select-input-padding-horizontal-base + @select-font-size-base;
    }

    &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
    &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
        padding-right: @selection-item-right-padding;
    }

    // Opacity selection if open
    // &.@{select-prefix-cls}-open .@{select-prefix-cls}-selection-item {
    //     color: @select-input-placeholder-color;
    // }

    // ========================== Input ==========================
    // We only change the style of non-customize input which is only support by `combobox` mode.

    // Not customize
    &:not(.@{select-prefix-cls}-customize-input) {
        .@{select-prefix-cls}-selector {
            width: 100%;
            height: @select-input-height-base;
            padding: @select-single-selector-padding;

            .@{select-prefix-cls}-selection-search-input {
                height: @select-height-without-border;
            }

            &::after {
                line-height: @select-height-without-border;
            }
        }
    }

    &.@{select-prefix-cls}-customize-input {
        .@{select-prefix-cls}-selector {
            &::after {
                display: none;
            }

            .@{select-prefix-cls}-selection-search {
                position: static;
                width: 100%;
            }

            .@{select-prefix-cls}-selection-placeholder {
                position: absolute;
                right: 0;
                left: 0;
                padding: 0 @select-input-padding-horizontal-base;

                &::after {
                    display: none;
                }
            }
        }
    }

    // ============================================================
    // ==                          Size                          ==
    // ============================================================
    .select-size(@suffix, @input-height) {
        @merged-cls: ~'@{select-prefix-cls}-@{suffix}';

        &.@{merged-cls}:not(.@{select-prefix-cls}-customize-input) {
            .@{select-prefix-cls}-selector {
                height: @input-height;

                &::after,
                .@{select-prefix-cls}-selection-item,
                .@{select-prefix-cls}-selection-placeholder {
                    line-height: @input-height - 2 * @border-width-base;
                }
            }

            // Not customize
            &:not(.@{select-prefix-cls}-customize-input) {
                .@{select-prefix-cls}-selection-search-input {
                    height: @input-height - 2 * @border-width-base;
                }
            }
        }
    }

    .select-size('lg', @select-single-item-height-lg);
    .select-size('sm', @input-height-sm);

    // Size small need additional set padding
    &.@{select-prefix-cls}-sm {
        &:not(.@{select-prefix-cls}-customize-input) {
            .@{select-prefix-cls}-selection-search {
                right: @select-input-padding-horizontal-sm;
                left: @select-input-padding-horizontal-sm;
            }

            .@{select-prefix-cls}-selector {
                padding: 0 @select-input-padding-horizontal-sm;
            }

            // With arrow should provides `padding-right` to show the arrow
            &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
                right: @select-input-padding-horizontal-sm + @select-font-size-base * 1.5;
            }

            &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
            &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
                padding-right: @select-font-size-base * 1.5;
            }
        }
    }

    &.@{select-prefix-cls}-lg {
        &:not(.@{select-prefix-cls}-customize-input) {
            .@{select-prefix-cls}-selector {
                padding: 0 @select-input-padding-horizontal-lg;
            }
        }
    }
}

.@{select-prefix-cls}-single.@{select-prefix-cls}-disabled {
    .@{select-prefix-cls}-selector .@{select-prefix-cls}-selection-item {
        color: ~'@{@{select-selecter-selected-tp}-readonly-disabled-color}';
    }
}