:root {
    .react-select {
        @apply border-b border-gray-500 border-opacity-20;

        &__control {
            @apply border-0 shadow-none rounded-none min-h-4.5 bg-transparent;

            &--menu-is-open {
                .react-select__indicator {
                    @apply -scale-y-100;
                }
            }
        }

        &__option {
            &--is-selected {
                @apply text-green-500 bg-transparent;
            }

            &--is-focused {
                @apply bg-gray-200;
            }
        }

        &__indicator {
            @apply transform pr-1;
        }

        &__menu {
            @apply bg-gray-100 rounded-none border-0 shadow-none z-50;
        }

        &__input {
            box-shadow: none;
        }

        &.select-small {
            .react-select {
                &__value-container {
                     @apply pl-0;
                }

                &__indicator {
                    @apply pr-2;
                }
            }
        }

        &__input-container {
            @apply mb-0;
        }

        &__single-value {
            @apply text-gray-500 text-xs;

            @screen sm {
                @apply text-base;
            }
        }
    }
}