@import 'common/sass/variables'; .Select { border-radius: 2px; background-color: white; border: 1px solid #e5ecf3; border-radius: 2px; font-weight: 400; font-size: 1rem; box-shadow: inset 0 1px 0 0 rgba(63, 63, 68, 0.05); transition: border-color 120ms, box-shadow 120ms; height: $input-height-base; &-control { min-width: 7.5rem; height: inherit; border: none !important; box-shadow: none !important; background-color: transparent !important; border: none !important; &:hover { box-shadow: none; } } &-placeholder { line-height: $line-height-base; } &-input { position: absolute; > input { line-height: $line-height-base; padding: 0; } } &-placeholder, &-input { padding-left: 0; padding-right: 0; padding: 0rem 1rem; top: 50%; transform: translateY(-50%); display: block; height: auto; } &-option { padding: 0.75rem 1rem; } &-menu-outer { z-index: 3; width: calc(100% + 2px); left: -1px; border-radius: 2px; background-color: white; border: none; border-left: 2px solid #5694b8; border-right: 2px solid #5694b8; border-bottom: 2px solid #5694b8; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-color: inherit; } &-menu { max-height: 8.625rem; } &.invalid.has-blurred { border-color: $brand-danger; box-shadow: inset 0px 0px 0px 1px $brand-danger; } &.is-focused { border-color: #4295bc; box-shadow: inset 0px 0px 0px 1px #4295bc; &.valid { border-color: #8dd17b; box-shadow: inset 0px 0px 0px 1px #8dd17b; } } &-value { line-height: $line-height-base !important; padding-left: 0 !important; padding: 0.75rem 1rem !important; height: inherit !important; &-label { position: relative; top: 50%; transform: translateY(-50%); display: block; } } &-multi-value-wrapper { display: block; position: relative; height: inherit; } // Identicons need to fit into the select .Identicon { display: inline-block; width: 22px !important; height: 22px !important; top: -1px; } }