@import "../../styles/modules/importAll";

$selectedColor: #0366D6;

.SelectMenu {
    * {
        box-shadow: none !important;
        border-radius: 0;
    }

    &.disabled {
        .Select-control {
            cursor: not-allowed;
        }
    }

    .react-select__menu {
        border: 1px solid #e5e6ed;
    }

    .react-select__group {
        font-size: 1em;
        font-weight: normal;
        text-transform: capitalize;
    }

    .react-select__indicator {
        color: $black;
    }

    .react-select__group-heading {
        color: #586069;
        font-size: 12px;
        line-height: 16px;
        background-color: transparent;
        text-transform: capitalize;
        padding: 10px;
        font-weight: normal;
    }

    .react-select__option {
        color: #24292E;
        font-size: 14px;
        line-height: 20px;
        padding: 12px;

        &--is-focused {
            background-color: #E9F1F4;
        }

        &--is-selected {
            background-color: $selectedColor;
            color: $white;
        }
    }

    .Select, .Select-control, .Select-input {
        height: 100%;
    }

    .is-open {
        .combobox {
            border: 1px solid $black;
        }
        
    }

    .is-disabled {
        .Select-control {
            border: 1px solid rgba($black, 0.2);
            color: rgba($black, 0.2) !important;
        }

        .Select-placeholder {
            color: rgba($black, 0.2) !important;
        }
    }

    .is-focused {
        .Select-control, .combobox {
            border: 1px solid $black;
        }
    }

    .Select-control {
        border: 1px solid rgba($black, 0.45);
        transition: background-color 0.3s ease;

        &:focus {
            border: 1px solid $black;
        }
    }

    .Select-placeholder {
        color: $black !important;
        transition: color 0.3s ease;
    }

    .Select-arrow {
        transition: border 0.3s ease;
    }

    .Select-option {
        transition: color 0.3s, border 0.3s;
        transition-timing-function: ease;
        border-radius: 0;
    }
}
