.#{$pui}select {
    @extend .#{$pui}input;

    cursor: pointer;

    .chevron {
        position: absolute;
        display: block;
        top: calc(50% + 2px);
        right: $input-padding-h;
        transform: translateY(-50%);
        z-index: 1;

        color: $color-dark-gray;
        width: $select-chevron-size;
        height: $select-chevron-size;
        text-align: center;
        line-height: $select-chevron-size;
        font-size: $select-chevron-size;
        text-align: center;
    }

    &.has-action {
        .action-trigger {
            @include transitions;
            transition-property: opacity;
            opacity: 0;
            z-index: 3;
        }

        &:hover {
            .action-trigger {
                opacity: 1;
            }
        }
    }

    &.treeselect {
        .#{$pui}treeselect {
            display: flex;
            align-items: center;
        }

        &.has-label .#{$pui}treeselect {
            display: block;
        }

        &.auto-height {
            height: auto;

            .#{$pui}treeselect {
                position: relative;
                height: auto;
                padding-bottom: $input-padding-v;
            }
        }
    }
}

.select-dropdown .#{$pui}dropdown {
    max-height: 200px;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-track {
        background: $color-border-gray;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: $color-dark-gray;
    }
}

.#{$pui}dropdown-wrapper.is-active {
    & > .#{$pui}dropdown-trigger > .#{$pui}select {
        border-color: $color-primary;

        .action-trigger {
            opacity: 1;
        }
    }
}