$primary-color: #007bff;
$warning-color: #ffc107;
$success-color: #28a745;
$danger-color: #dc3545;
$shade001: #d9d9d9;
$shade002: #efefefef;
$shade003: #eee;
$white: #fff;
$lightBlack: rgb(95, 95, 95);

/*|-------------------
  | Primary State
  |-------------------*/
[id*="select-control-"].-primary:hover { border: 1px solid $primary-color; }
[id*="select-control-"].-primary.-border { border: 1px solid $primary-color; }
[id*="select-control-"].-primary {
    .-focus {
        max-width: 100%;
        width: 100%;
        border-color: $primary-color;
        border-right-width: 1px !important;
        outline: 0;
        display: inline-block;
        -webkit-box-shadow: 0 0 0 2px rgba(0,123,255,0.2);
        box-shadow: 0 0 0 3px rgba(0,123,255,0.2);
        border-radius: 2px;
    }
}
/*|-------------------
  | Warning State
  |-------------------*/
[id*="select-control-"].-warning:hover { border: 1px solid $warning-color; }
[id*="select-control-"].-warning.-border { border: 1px solid $warning-color; }
[id*="select-control-"].-warning {
    .-focus {
        max-width: 100%;
        width: 100%;
        border-color: $warning-color;
        border-right-width: 1px !important;
        outline: 0;
        display: inline-block;
        -webkit-box-shadow: 0 0 0 2px rgba(255,193,7,0.2);
        box-shadow: 0 0 0 3px rgba(255,193,7,0.2);
        border-radius: 2px;
    }
}
/*|-------------------
  | Success State
  |-------------------*/
[id*="select-control-"].-success:hover { border: 1px solid $success-color; }
[id*="select-control-"].-success.-border { border: 1px solid $success-color; }
[id*="select-control-"].-success {
    .-focus {
        max-width: 100%;
        width: 100%;
        border-color: $success-color;
        border-right-width: 1px !important;
        outline: 0;
        display: inline-block;
        -webkit-box-shadow: 0 0 0 2px rgba(40,167,69,0.2);
        box-shadow: 0 0 0 3px rgba(40,167,69,0.2);
        border-radius: 2px;
    }
}
/*|-------------------
  | Danger State
  |-------------------*/
[id*="select-control-"].-danger:hover { border: 1px solid $danger-color; }
[id*="select-control-"].-danger.-border { border: 1px solid $danger-color; }
[id*="select-control-"].-danger {
    .-focus {
        max-width: 100%;
        width: 100%;
        border-color: $danger-color;
        border-right-width: 1px !important;
        outline: 0;
        display: inline-block;
        -webkit-box-shadow: 0 0 0 2px rgba(220,53,69,0.2);
        box-shadow: 0 0 0 3px rgba(220,53,69,0.2);
        border-radius: 2px;
    }
}