
 .form-select {
    position: relative;
    font: $baseFont;

    select {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    &--active {
        .form-select {
            &__selected {
                &:after {
                    transform: rotate(180deg);
                }
            }

            &__options {
                display: block;
            }
        }
    }

    &__selected {
        background: $gray;

        &:after {
            content: "";
            display: block;
            position: absolute;
            right: 1rem;
            top: 50%;
            margin-top: -2px;
            @include triangleBottom(6px, 4px, $black);
            width: 0;
            height: 0;
        }
    }

    &__options {
        position: absolute;
        background-color: $gray;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 99;
        display: none;
    }

    &__option, &__selected {
        color: $baseFontColor;
        padding: 0.35rem 1rem;
        cursor: pointer;
    }

    &__option {
        &:hover, &:active, &:focus, &--selected {
            background: $black;
            color: $white;
        }
    }
}
