@import "../lib.less";
@import (reference) "../dropdown.less";
@import "../variables/components/select.less";
@import "../variables/components/option.less";
@import "../variables/components/input.less";
@import "../variables/components/tag.less";

.@{veui-prefix}-select {
    @adjusted-select-padding-y: veui-sum(@veui-select-padding-y, -1px);

    position: relative;
    display: inline-flex;
    align-items: center;
    width: @veui-select-width;
    outline: none;
    .veui-stub();

    &:not(*:root) {
      vertical-align: -0.5px; // hacks to align with other inputs
    }

    &:not(&-empty):not(&-expanded)
    .@{veui-prefix}-input:not(.@{veui-prefix}-focus)
    .@{veui-prefix}-input-placeholder {
        color: @veui-input-font-color;
    }

    &.@{veui-prefix}-readonly .@{veui-prefix}-input-placeholder {
        color: @veui-input-font-color-read-only;
    }

    &[data-focus-visible-added] .@{veui-prefix}-input {
        .veui-focus-ring(@veui-input-border-color-focus, @veui-input-shadow-focus);

        &.@{veui-prefix}-invalid {
            .veui-focus-ring(
                @veui-input-border-color-error-focus,
                @veui-input-shadow-error-focus
            );
        }
    }

    .@{veui-prefix}-input {
        width: auto;
        flex-grow: 1;
    }

    .@{veui-prefix}-input-input {
        display: none;
    }

    &-searchable {
        .@{veui-prefix}-input-input {
            display: block;
        }
    }

    &-trigger {
        max-width: 100%;
        cursor: pointer;
        .padding(_, @veui-select-padding-x);

        .@{veui-prefix}-input-before {
            flex-grow: 0;
            flex-shrink: 1;
            padding-right: 0;
            .ellipsis();
        }

        .@{veui-prefix}-input-after {
            padding-left: @veui-select-content-spacing;
            color: @veui-font-color-disabled;
        }

        .@{veui-prefix}-input-input {
            cursor: inherit;
        }
    }

    &-label {
        max-width: none;
        color: @veui-select-label-color;
        .ellipsis();

        .@{veui-prefix}-readonly & {
            color: @veui-input-font-color-read-only;
        }

        .@{veui-prefix}-disabled & {
            color: @veui-input-font-color-disabled;
        }
    }

    &-wrap {

        .@{veui-prefix}-input {
            min-width: 100%;
            height: auto;
            overflow: hidden;
            display: block;

            &-before {
                display: block;
                overflow: visible;

                .@{veui-prefix}-tag {
                    float: left;
                    margin-right: 4px;
                    margin-top: 3px;
                }

                .@{veui-prefix}-select-placeholder {
                    float: left;
                    margin-top: @adjusted-select-padding-y;
                }
            }

            &-input {
                float: left;
                margin-top: @adjusted-select-padding-y;
                width: 0;
            }

            &-placeholder {
                margin-top: @adjusted-select-padding-y;
            }

            &-after {
                float: right;
                margin: @adjusted-select-padding-y 0;
            }
        }
    }
    &-custom-label {
        flex: 0 1 auto;
        .ellipsis();
    }

    &&-searchable&-multiple {
        .@{veui-prefix}-input {
            &-input {
                width: 0;
                max-width: 100%;
            }
        }
        &:not(.@{veui-prefix}-select-empty) {
            .@{veui-prefix}-input {
                &-content {
                    display: block;
                }
            }
        }
        &.@{veui-prefix}-select-expanded {
            .@{veui-prefix}-input {
                &-input {
                    width: 10px;
                }
            }
        }
    }

    &-placeholder {
        color: @veui-input-placeholder-color;
    }

    &-count {
        margin-right: @veui-select-content-spacing;
    }

    &-icon {
        display: flex;
        position: relative;
    }

    &-expanded {
        .@{veui-prefix}-input {
            border-color: @veui-select-border-focus-color;
            box-shadow: 0 0 0 2px  @veui-select-border-focus-shadow-color;
        }
    }

    &-toggle {
        .veui-icon-size(@veui-select-icon-size-aux);
        .veui-transition(transform, color, opacity);
        color: @veui-select-icon-color-aux;

        .@{veui-prefix}-readonly &,
        .@{veui-prefix}-disabled & {
            color: @veui-select-icon-color-aux-disabled;
        }
    }

    &:not(.@{veui-prefix}-readonly):not(.@{veui-prefix}-disabled):hover
        &-clear
        + &-toggle,
    .@{veui-prefix}-focus &-clear + &-toggle,
    &-clear.focus-visible + &-toggle {
        opacity: 0;
    }

    &-expanded &-toggle {
        transform: rotateZ(180deg);
    }

    &-clear {
        .absolute(50%, 50%, _, _);
        transform: translate(50%, -50%);
        opacity: 0;
        z-index: 1;

        .@{veui-prefix}-icon {
            .veui-icon-size(@veui-input-icon-size);
            color: @veui-select-icon-clear-color;
        }

        .@{veui-prefix}-select:not(.@{veui-prefix}-readonly):not(.@{veui-prefix}-disabled):hover
        &,
        .@{veui-prefix}-focus &,
        &.focus-visible {
            opacity: 1;
        }
    }

    &-options {
        &:extend(._veui-dropdown-overlay all);
        overflow-y: auto;
        background-color: @veui-option-background-color;
        outline: none;

        &-multiple .@{veui-prefix}-option-selected {
            font-weight: @veui-font-weight-1;
        }
    }

    .make-metrics (@size) {
        @height: ~"veui-select-tag-height-@{size}";
        @line-height: ~"veui-input-height-@{size}";
        @after-spacing: ~"veui-select-after-icon-@{size}";

        &.@{veui-prefix}-select {
            &-wrap {
                .@{veui-prefix}-select-placeholder {
                    line-height: @@height;
                }

                .@{veui-prefix}-input-after {
                    height: @@height;
                }

                .@{veui-prefix}-tag {
                    height: @@height;
                    line-height: @@height;
                }

                .@{veui-prefix}-input-input {
                    height: @@height;
                }
            }
        }
    }

    .make-metrics(m);

    &[ui~="xs"] {
        .make-metrics(xs);
    }
    &[ui~="s"] {
        .make-metrics(s);
    }
    &[ui~="l"] {
        .make-metrics(l);
    }

    .@{veui-prefix}-input-group & {
        margin-right: -1px;

        &:first-child .@{veui-prefix}-input {
            .border-right-radius(0);
        }

        &:last-child .@{veui-prefix}-input {
            .border-left-radius(0);
        }

        &:not(:first-child):not(:last-child) .@{veui-prefix}-input {
            border-radius: 0;
        }
    }
}