@dropdown-height: 1.5rem;
@dropdown-item-height: 1.25rem;
@dropdown-item-active-height: 1.5rem;

.dropdown {
    display: inline-block;
    height: @dropdown-height;
    position: relative;
    -moz-user-select: none;
    user-select: none;
    width: 100%;

    &__selected {
        align-items: center;
        background-color: @color-control-active;
        background-image: @icon-down;
        background-position: center right 0.25rem;
        background-repeat: no-repeat;
        background-size: 1rem;
        color: @color-control-fore;
        display: inline-flex;
        height: @dropdown-item-height;
        justify-content: center;
        line-height: @dropdown-item-height;
        margin-top: (@dropdown-height - @dropdown-item-height) / 2;
        position: absolute;
        text-align: center;
        width: 100%;

        &__text {
            display: inline-block;
            max-width: calc(100% - 2.5rem);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    &__list {
        background-color: @color-control-back;
        border: @size-border solid @color-border;
        border-top: none;
        box-shadow: 0 0 0.25rem black;
        box-sizing: border-box;
        display: none;
        margin-top: (@dropdown-height - @dropdown-item-height) / 2;
        overflow: hidden;
        position: absolute;
        width: 100%;

        &__item {
            align-items: center;
            background-color: @color-control-back;
            color: @color-control-fore;
            display: inline-flex;
            justify-content: center;
            min-height: @dropdown-item-height;
            text-align: center;
            width: 100%;
            
            &:hover {
                background-color: @color-control-hover;
                transition: background-color @time-fast;
            }

            &--selected {
                overflow: hidden;
                visibility: hidden;
                white-space: nowrap;
            }
        }
    }

    &--open &__list {
        display: inline-block;
        margin-top: (@dropdown-height - @dropdown-item-active-height) / 2;
        z-index: 1;

        &__item {
            min-height: @dropdown-item-active-height;
        }
    }

    &--open &__selected {
        height: @dropdown-item-active-height;
        margin-top: (@dropdown-height - @dropdown-item-active-height) / 2;
        z-index: 2;
    }
}

.preview .dropdown {
    cursor: pointer;
}
