.select-box-kit, .select-kit { &.combo-box { .select-box-kit-body, .select-kit-body { width: 100%; } .select-box-kit-row, .select-kit-row { margin: 5px; min-height: 1px; padding: 5px; } .select-box-kit-filter, .select-kit-filter { line-height: 18px; padding: 6px 10px; border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%); .filter-input { margin-right: 5px; } } .select-box-kit-header, .select-kit-header { background: $secondary; border: 1px solid $primary-medium; padding: 6px 10px; font-weight: 500; font-size: 1em; line-height: 18px; &.is-focused { border: 1px solid $tertiary; -webkit-box-shadow: $tertiary 0px 0px 6px 0px; box-shadow: $tertiary 0px 0px 6px 0px; } } &.is-disabled { .select-kit-header { background: #e9e9e9; border-color: #ddd; } } &.is-highlighted { .select-kit-header { border: 1px solid $tertiary; -webkit-box-shadow: $tertiary 0px 0px 6px 0px; box-shadow: $tertiary 0px 0px 6px 0px; } } &.is-expanded { .select-kit-wrapper { display: block; border: 1px solid $tertiary; -webkit-box-shadow: $tertiary 0px 0px 6px 0px; box-shadow: $tertiary 0px 0px 6px 0px; } .select-kit-header { border-color: transparent; -webkit-box-shadow: none; box-shadow: none; } .select-kit-body { border-radius: 0 0 3px 3px ; } } &.is-expanded.is-above { .select-kit-header { border-radius: 0 0 3px 3px; } .select-kit-body { border-radius: 3px 3px 0 0; } } } }