@import '../../less/styles';
@import '../../less/palette';
@import '../../less/palette-brand-@{theme}';

.dropdown {
    @default-height: 40px;

    overflow: visible;
    vertical-align: top;
    position: relative;

    .container {
        position: relative;
        width: 100%;
        height: @default-height;
        line-height: @default-height;

        &:before,
        &:after {
            content: '';
            position: absolute;
            height: 7px;
            width: 2px;
            background: @color-primary;
            z-index: 12;
            right: 18px;
            top: 50%;
            margin-top: 1px;
            border-radius: 0;
            transition: background 0.2s;
        }

        &:before {
            transform: translateY(-50%) rotate(-45deg);
            margin-left: -3px;
        }

        &:after {
            transform: translateY(-50%) rotate(45deg);
            margin-right: -4px;
        }
    }

    select {
        &.header {
            appearance: none;
            font-family: inherit;
            font-size: inherit;
            color: inherit;
            width: inherit;
            height: inherit;
            line-height: inherit;
        }
    }

    .header {
        border: 1px solid @color-border;
        background-color: white;
        border-radius: 3px;
        padding: 1px 12px 0;
        position: relative;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        outline: none;
        height: inherit;
        line-height: inherit;

        &:focus {
            border-color: @color-brand;
        }

        &:not(:active):focus {
            &~.error-tooltip {
                display: block;
            }
        }
    }

    &.disabled {
        .container {
            &:before,
            &:after {
                background: @color-hint;
            }
        }

        .header {
            cursor: not-allowed;
            background-color: @color-off-white;
            color: @color-hint;
        }
    }

    .options {
        position: absolute;
        top: @default-height + 4;
        right: 0;
        left: 0;
        max-height: 0;
        border-radius: 3px;
        background: #fff;
        box-sizing: border-box;

        /* can't just set border-width 0 here because of lesshint */
        border: 1px solid @color-border;
        border-width: 0;

        overflow: hidden;
        z-index: 13;

        .option {
            border-top: 1px solid transparent;
            border-bottom: 1px solid @color-separator;
            position: relative;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: @default-height;
            line-height: @default-height;
            padding: 1px 0 0 40px;

            outline: none;

            &:last-of-type {
                border-bottom: none;
            }

            .selection-indicator-left;

            &:focus,
            &.hover,
            &:hover {
                background: @color-illegal-white;
            }

            &:active,
            &.active {
                .selection-indicator-selected;
            }
        }
    }

    &.active {
        .container {
            &:before,
            &:after {
                background: @color-brand;
            }
        }

        .header {
            border-color: @color-brand;
        }

        .options {
            max-height: 300px;
            overflow-y: auto;
            border-width: 1px;
        }
    }

    .error-tooltip {
        display: none;
        .error-tooltip-mixin();
    }


    &.has-error {
        .container {
            &:before,
            &:after {
                background: @color-error;
            }
        }

        .header {
            color: @color-error;
            border: 1px solid @color-error;
            background-color: @color-error-input-bg;
        }

        &.disabled {
            .container {
                &:before,
                &:after {
                    background: @color-error-disabled;
                }
            }

            .header {
                color: @color-error-disabled;
                border-color: @color-error-disabled;
                background-color: @color-error-disabled-bg;
            }
        }
    }
}
