@import "~/styles/partials/variables";
@import "~/styles/partials/iconStyle";
@import "~/styles/partials/mixins";
.select {
    &--container {
        border-bottom: 1px solid rgba($blackPrimary, 0.6);
        padding-bottom: 15px;
        // border-width: 0 0 2px 0;
        line-height: 1;
        &.error{
            border-bottom: 1px solid $error;
        }
        &.active{
            .label{
                display: none;
            }
        }
        &.open {
            .select--list li {
                display: block;
            }

            &::after {
                transform: rotate(-180deg);
            }
        }
        &:after {
            content: $lt--dropdown-arrow;
            color: $blackPrimary;
            display: block;
            margin-left: 20px;
            transition: all 0.4s ease;
            position: absolute;
            right: 0;
            bottom: 15px;
            font-size: size(24);
        }
        &-placeholder{
            font-size: size(18);
            position: absolute;
            top: 50%;
            left: 15px;
            transform: translateY(-50%);

        }
        &.open{
            ul{
                border: solid 1px rgba($primary, 0.2);
                border-radius: 5px;
                // border-top: 0px;
            }
        }
        .message{
            position: absolute;
            left: 0;
            bottom: -16px;
        }
    }

    &--list {
        z-index: 2;
        position: absolute;
        top: 100%;
        transform: translateY(5px);
        left: 0;
        max-height: 255px;
        overflow: auto;
        min-width: 110px;
        padding: 0 10px;
        background: $white;
        &.open {
            &.select--list li {
                display: block;
            }

            &::after {
                transform: rotate(-180deg);
            }
        }

        li {
            display: none;
            padding: 12px 0;
            margin: 2px 0;
            color: $primary;
            // border-bottom: 1px solid rgba($primary, 0.2);
        }
        .active {
            // color: $secondary;
            border-bottom: solid 1px rgba($primary, 0.2);
        }
    }
}