@broxus/react-uikit 0.17.4 → 0.19.0

package/dist/cjs/components/Control/Select/index.scss

@@ -1,816 +0,0 @@
-// Name:            Control
-// Description:     Component to create Select elements
-//
-// Component:       `uk-control-select`
-//
-// Modifier:        `uk-select-single`
-//                  `uk-select-multiple`
-//                  `uk-control-small`
-//                  `uk-control-medium`
-//                  `uk-control-large`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@import '../../../styles/variables.scss';
-
-
-// Mixins
-// ========================================================================
-
-@mixin select-item() {
-    color: var(--select-item-color);
-    display: block;
-    font-weight: normal;
-    line-height: var(--select-item-line-height);
-    padding: var(--select-gutter);
-    position: relative;
-}
-
-/* ========================================================================
-   Component: Select
- ========================================================================== */
-
-.uk-select {
-    cursor: pointer;
-    display: flex;
-    min-height: 100%;
-    padding: 0;
-    position: relative;
-    width: 100%;
-    @if mixin-exists(hook-select) {
-        @include hook-select;
-    }
-}
-
-.uk-select-selector {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0 var(--select-selector-padding-horizontal);
-    position: relative;
-    width: 100%;
-    @if mixin-exists(hook-select-selector) {
-        @include hook-select-selector;
-    }
-}
-
-.uk-select-selector input {
-    cursor: inherit;
-    font: inherit;
-}
-
-/* Disabled */
-.uk-select-selector.uk-select-disabled,
-.uk-select-selector.uk-select-disabled input {
-    cursor: not-allowed;
-}
-
-// Reset search input style
-.uk-select-selector .uk-select-selection-search-input {
-    appearance: none;
-    background: transparent;
-    border: none;
-    color: var(--select-selection-search-input-color);
-    margin: 0;
-    outline: none;
-    padding: 0;
-    @if mixin-exists(hook-select-selection-search-input) {
-        @include hook-select-selection-search-input;
-    }
-}
-
-.uk-select-selector .uk-select-selection-search-input::-webkit-search-cancel-button {
-    appearance: none;
-    display: none;
-}
-
-//
-// Selection
-//
-
-.uk-select-selection-item {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    // IE11 css hack. `*::-ms-backdrop,` is a must have
-    @media all and (-ms-high-contrast: none) {
-        *::-ms-backdrop,
-        & {
-            flex: auto;
-        }
-    }
-}
-
-//
-// Placeholder
-//
-
-.uk-select-selection-placeholder {
-    color: var(--select-selection-placeholder-color);
-    overflow: hidden;
-    pointer-events: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    @if mixin-exists(hook-select-selection-placeholder) {
-        @include hook-select-selection-placeholder;
-    }
-
-    // IE11 css hack. `*::-ms-backdrop,` is a must have
-    @media all and (-ms-high-contrast: none) {
-        *::-ms-backdrop,
-        & {
-            flex: auto;
-        }
-    }
-}
-
-//
-// Search
-//
-
-.uk-select-show-search {
-    cursor: text;
-}
-
-
-/* Single selection
- ========================================================================== */
-
-.uk-select-single .uk-select-selector {
-    overflow: hidden;
-    @if mixin-exists(hook-select-single-selector) {
-        @include hook-select-single-selector;
-    }
-}
-
-.uk-select-single .uk-select-selection-search {
-    align-items: center;
-    display: flex;
-    inset: 0 var(--select-selector-padding-horizontal) 0 var(--select-selector-padding-horizontal);
-    position: absolute;
-    @if mixin-exists(hook-select-single-selection-search) {
-        @include hook-select-single-selection-search;
-    }
-}
-
-.uk-select-single .uk-select-selection-search-input {
-    height: 100%;
-    line-height: initial;
-    width: 100%;
-    @if mixin-exists(hook-select-single-selection-search-input) {
-        @include hook-select-single-selection-search-input;
-    }
-}
-
-.uk-select-single .uk-select-selection-item,
-.uk-select-single .uk-select-selection-placeholder {
-    padding: 0;
-    transition: all var(--transition-duration);
-}
-
-.uk-select-single .uk-select-selection-item {
-    position: relative;
-    user-select: none;
-    @if mixin-exists(hook-select-single-selection-item) {
-        @include hook-select-single-selection-item;
-    }
-}
-
-// Opacity selection if open
-.uk-select-single.uk-select-open .uk-select-selection-item {
-    color: var(--select-selection-placeholder-color);
-    @if mixin-exists(hook-select-single-open-selection-item) {
-        @include hook-select-single-open-selection-item;
-    }
-}
-
-
-/* Multiple selection
- ========================================================================== */
-
-.uk-select-multiple .uk-select-selector {
-    padding: var(--select-gutter) var(--select-selector-padding-horizontal);
-    @if mixin-exists(hook-select-multiple-selector) {
-        @include hook-select-multiple-selector;
-    }
-}
-
-.uk-select-multiple .uk-select-selection-placeholder {
-    left: var(--select-selector-padding-horizontal);
-    position: absolute;
-    right: var(--select-selector-padding-horizontal);
-    top: 50%;
-    transform: translateY(-50%);
-    transition: all var(--transition-duration);
-    @if mixin-exists(hook-select-multiple-selection-placeholder) {
-        @include hook-select-multiple-selection-placeholder;
-    }
-}
-
-.uk-select-multiple .uk-select-selection-overflow {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    grid-gap: var(--select-gutter);
-    height: auto;
-    line-height: normal;
-    padding: 0;
-    width: 100%;
-}
-
-.uk-select-multiple .uk-select-selection-overflow-item {
-    flex: none;
-    max-width: 100%;
-}
-
-.uk-select-multiple .uk-select-selection-overflow-item-suffix {
-    display: none;
-    left: unset !important;
-    position: unset !important;
-    top: unset !important;
-}
-
-.uk-select-multiple.uk-select-open .uk-select-selection-overflow-item-suffix {
-    display: block;
-}
-
-.uk-select-multiple .uk-select-selection-item {
-    align-items: center;
-    background-color: var(--select-selection-item-background);
-    border-radius: var(--select-selection-item-border-radius);
-    box-sizing: border-box;
-    display: flex;
-    flex: none;
-    font-size: var(--select-selection-item-font-size);
-    line-height: var(--select-selection-item-line-height);
-    max-width: 100%;
-    padding: 0;
-    position: relative;
-    transition: font-size var(--transition-duration),
-        line-height var(--transition-duration),
-        height var(--transition-duration);
-    user-select: none;
-    @if mixin-exists(hook-select-multiple-selection-item) {
-        @include hook-select-multiple-selection-item;
-    }
-}
-
-.uk-select-multiple .uk-select-selection-item-content {
-    display: inline-flex;
-    flex-wrap: wrap;
-    overflow: hidden;
-    padding: 0 var(--select-gutter);
-    text-overflow: ellipsis;
-    white-space: pre;
-}
-
-.uk-select-multiple .uk-select-selection-item-remove {
-    --icon-size: var(--select-selection-item-remove-icon-size);
-
-    align-items: center;
-    color: var(--control-icon-color);
-    cursor: pointer;
-    display: inline-flex;
-    flex-wrap: wrap;
-    padding-right: var(--select-gutter);
-    @if mixin-exists(hook-select-multiple-selection-item-remove) {
-        @include hook-select-multiple-selection-item-remove;
-    }
-}
-
-.uk-select-multiple .uk-select-selection-item-remove:hover {
-    color: var(--select-selection-item-remove-icon-hover-color);
-}
-
-.uk-select-multiple .uk-select-selection-search {
-    display: flex;
-    flex: none;
-    position: relative;
-    @if mixin-exists(hook-select-multiple-selection-search) {
-        @include hook-select-multiple-selection-search;
-    }
-}
-
-.uk-select-multiple .uk-select-selection-search-input,
-.uk-select-multiple .uk-select-selection-search-mirror {
-    font-family: inherit;
-    transition: all var(--transition-duration);
-}
-
-.uk-select-multiple .uk-select-selection-search-input {
-    min-width: 4.1px; // fix search cursor missing
-    width: 100%;
-    @if mixin-exists(hook-select-multiple-selection-search-input) {
-        @include hook-select-multiple-selection-search-input;
-    }
-}
-
-.uk-select-multiple .uk-select-selection-search-mirror {
-    left: 0;
-    position: absolute;
-    top: 0;
-    visibility: hidden;
-    white-space: pre; // fix whitespace wrapping caused width calculation bug
-    z-index: 999;
-}
-
-
-/* Icons
- ========================================================================== */
-
-.uk-select-arrow,
-.uk-select-clear {
-    align-items: center;
-    color: var(--select-icon-color);
-    cursor: pointer;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    position: absolute;
-    transition: color var(--transition-duration) var(--ease-in-out);
-    width: var(--select-height);
-}
-
-.uk-select:not(.uk-select-disabled) .uk-select-arrow:hover,
-.uk-select:not(.uk-select-disabled) .uk-select-clear:hover {
-    color: var(--select-icon-hover-color);
-}
-
-.uk-select-disabled .uk-select-arrow,
-.uk-select-disabled .uk-select-clear {
-    color: var(--select-icon-disabled-color);
-    cursor: not-allowed;
-}
-
-.uk-control-select:not(.uk-control-rtl) .uk-select-arrow,
-.uk-control-select:not(.uk-control-rtl) .uk-select-clear {
-    right: 0;
-}
-
-/* Arrow */
-.uk-select-arrow {
-    --icon-size: var(--select-arrow-icon-size);
-    @if mixin-exists(hook-select-arrow) {
-        @include hook-select-arrow;
-    }
-}
-
-/* Clear */
-.uk-select-clear {
-    @if mixin-exists(hook-select-clear) {
-        @include hook-select-clear;
-    }
-}
-
-.uk-control-select .uk-select-arrow + .uk-select-clear {
-    width: calc(var(--select-height) * 0.6777);
-}
-
-.uk-control-select:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
-    right: var(--select-height);
-}
-
-/* Selector */
-.uk-control-select:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
-.uk-control-select:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
-    padding-right: var(--select-height);
-}
-
-.uk-control-select:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: var(--select-height);
-    --clear-width: calc(var(--select-height) * 0.6777);
-    padding-right: calc(var(--arrow-width) + var(--clear-width));
-}
-
-
-/* Dropdown
- ========================================================================== */
-
-.uk-select-dropdown {
-    background-color: var(--select-dropdown-background);
-    border: var(--select-dropdown-border-width) var(--select-dropdown-border-style) var(--select-dropdown-border);
-    border-radius: var(--select-dropdown-border-radius);
-    box-sizing: border-box;
-    font-variant: initial;
-    left: -9999px;
-    outline: none;
-    overflow: hidden;
-    padding: calc(var(--select-gutter) / 2);
-    position: absolute;
-    top: -9999px;
-    z-index: calc(var(--global-z-index) + 30);
-    @if mixin-exists(hook-select-dropdown) {
-        @include hook-select-dropdown;
-    }
-}
-
-.uk-select-dropdown-placement-bottom-left.uk-slide-up-enter.uk-slide-up-enter-active,
-.uk-select-dropdown-placement-bottom-left.uk-slide-up-appear.uk-slide-up-appear-active {
-    animation-name: uk-slide-up-in;
-}
-
-.uk-select-dropdown-placement-top-left.uk-slide-up-enter.uk-slide-up-enter-active,
-.uk-select-dropdown-placement-top-left.uk-slide-up-appear.uk-slide-up-appear-active {
-    animation-name: uk-slide-down-in;
-}
-
-.uk-select-dropdown-placement-bottom-left .uk-slide-up-leave.uk-slide-up-leave-active {
-    animation-name: uk-slide-up-out;
-}
-
-.uk-select-dropdown-placement-top-left.uk-slide-up-leave.uk-slide-up-leave-active {
-    animation-name: uk-slide-down-out;
-}
-
-.uk-select-dropdown-hidden {
-    display: none;
-}
-
-.uk-select-dropdown-empty {
-    color: var(--control-disabled-color);
-}
-
-
-/* Dropdown options
- ========================================================================== */
-
-/* Empty */
-.uk-select-item-empty {
-    color: var(--select-item-disabled-color);
-    text-align: center;
-    @if mixin-exists(select-item) {
-        @include select-item;
-    }
-}
-
-.uk-select-item-empty .uk-empty {
-    margin: var(--global-small-margin) 0;
-}
-
-.uk-select-item-empty .uk-empty-img-simple-ellipse {
-    fill: var(--control-icon-color);
-    fill-opacity: 0.08;
-}
-
-.uk-select-item-empty .uk-empty-img-simple-g {
-    stroke: var(--control-icon-color);
-}
-
-.uk-select-item-empty .uk-empty-img-simple-path {
-    fill: var(--global-default-background);
-    stroke: var(--control-icon-color);
-}
-
-/* Items */
-.uk-select-item {
-    cursor: pointer;
-    transition: background var(--transition-duration) ease;
-    @if mixin-exists(select-item) {
-        @include select-item;
-    }
-}
-
-// Option
-.uk-select-item-option {
-    align-items: center;
-    display: flex;
-}
-
-.uk-select-item-option-content {
-    display: flex;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
-}
-
-.uk-select-item-option-state {
-    align-items: center;
-    display: flex;
-    flex: none;
-}
-
-.uk-select-item-option-active {
-    background-color: var(--select-item-active-background);
-}
-
-.uk-select-item-option-selected {
-    background-color: var(--select-item-selected-background);
-
-    .uk-select-item-option-state {
-        color: var(--select-item-selected-state-color);
-    }
-}
-
-.uk-select-item-option-disabled {
-    color: var(--select-item-disabled-color);
-    cursor: not-allowed;
-}
-
-.uk-select-item-option-grouped {
-    padding-left: calc(var(--control-padding-horizontal) * 2);
-}
-
-// Group
-.uk-select-item-group {
-    color: var(--select-item-group-color);
-    cursor: default;
-    font-size: var(--select-item-group-font-size);
-    padding: 0;
-    text-transform: var(--select-item-group-text-transform);
-}
-
-.uk-select-item-group:not(:first-child) {
-    margin: var(--select-gutter) 0;
-}
-
-.uk-select-item-group:not(:first-child):empty {
-    border-bottom: var(--control-border-width) var(--control-border-style) var(--control-border);
-}
-
-
-/* Control
- ========================================================================== */
-
-.uk-control.uk-control-select {
-    align-items: unset;
-    border: 0 none;
-    height: auto;
-    min-height: var(--select-height);
-    padding: 0;
-}
-
-.uk-control-select .uk-select {
-    border: var(--select-border-width) var(--select-border-style) var(--select-border);
-    border-radius: var(--select-border-radius);
-    box-sizing: border-box;
-    transition: var(--transition-medium-fast-duration) var(--ease-in-out);
-    transition-property: border;
-}
-
-// Hover state (unused for disabled state)
-.uk-control-select/*:not(.uk-disabled)*/:hover .uk-select {
-    border-color: var(--select-hover-border);
-}
-
-// Disabled state
-.uk-control-select.uk-disabled {
-    border-color: var(--select-disabled-border);
-}
-
-//
-// Sizes
-//
-
-/* Small */
-.uk-control-select.uk-control-small {
-    min-height: var(--select-small-height);
-}
-
-.uk-control-select.uk-control-small .uk-select-selector {
-    padding: 0 var(--select-selector-small-padding-horizontal);
-}
-
-.uk-control-select.uk-control-small .uk-select-arrow,
-.uk-control-select.uk-control-small .uk-select-clear {
-    width: var(--select-small-height);
-}
-
-// Clear
-.uk-control-select.uk-control-small .uk-select-arrow + .uk-select-clear {
-    width: calc(var(--select-small-height) * 0.6777);
-}
-
-.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
-    right: var(--select-small-height);
-}
-
-// Selector
-.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
-    padding-right: var(--select-small-height);
-}
-
-.uk-control-select.uk-control-small:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: var(--select-small-height);
-    --clear-width: calc(var(--select-small-height) * 0.6777);
-    padding-right: calc(var(--arrow-width) + var(--clear-width));
-}
-
-/* Medium */
-.uk-control-select.uk-control-medium {
-    min-height: var(--select-medium-height);
-}
-
-.uk-control-select.uk-control-medium .uk-select-selector {
-    padding: 0 var(--select-selector-medium-padding-horizontal);
-}
-
-.uk-control-select.uk-control-medium .uk-select-arrow,
-.uk-control-select.uk-control-medium .uk-select-clear {
-    width: var(--select-medium-height);
-}
-
-// Clear
-.uk-control-select.uk-control-medium .uk-select-arrow + .uk-select-clear {
-    width: calc(var(--select-medium-height) * 0.6777);
-}
-
-.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
-    right: var(--select-medium-height);
-}
-
-// Selector
-.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
-    padding-right: var(--select-medium-height);
-}
-
-.uk-control-select.uk-control-medium:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: var(--select-medium-height);
-    --clear-width: calc(var(--select-medium-height) * 0.6777);
-    padding-right: calc(var(--arrow-width) + var(--clear-width));
-}
-
-/* Large */
-.uk-control-select.uk-control-large {
-    min-height: var(--select-large-height);
-}
-
-.uk-control-select.uk-control-large .uk-select-selector {
-    padding: 0 var(--select-selector-large-padding-horizontal);
-}
-
-.uk-control-select.uk-control-large .uk-select-arrow ,
-.uk-control-select.uk-control-large .uk-select-clear {
-    width: calc(var(--select-large-height) * 0.8667);
-}
-
-// Clear
-.uk-control-select.uk-control-large .uk-select-arrow + .uk-select-clear {
-    width: calc(var(--select-large-height) * 0.6777);
-}
-
-.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-arrow + .uk-select-clear {
-    right: calc(var(--select-large-height) * 0.8667);
-}
-
-// Selector
-.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-show-arrow .uk-select-selector {
-    padding-right: calc(var(--select-large-height) * 0.8667);
-}
-
-.uk-control-select.uk-control-large:not(.uk-control-rtl) .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: calc(var(--select-large-height) * 0.8667);
-    --clear-width: calc(var(--select-large-height) * 0.6777);
-    padding-right: calc(var(--arrow-width) + var(--clear-width));
-}
-
-/* Right to Left Direction
- ========================================================================== */
-
-.uk-control-select.uk-control-rtl,
-.uk-select-dropdown-rtl {
-    direction: rtl;
-}
-
-.uk-control-select.uk-control-rtl .uk-select-arrow,
-.uk-control-select.uk-control-rtl .uk-select-clear {
-    left: 0;
-}
-
-.uk-control-select.uk-control-rtl .uk-select-arrow + .uk-select-clear {
-    left: var(--select-height);
-}
-
-.uk-control-select.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
-    padding-left: var(--select-height);
-}
-
-.uk-control-select.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: var(--select-height);
-    --clear-width: calc(var(--select-height) * 0.6777);
-    padding-left: calc(var(--arrow-width) + var(--clear-width));
-}
-
-/* Small */
-.uk-control-select.uk-control-small.uk-control-rtl .uk-select-arrow + .uk-select-clear {
-    left: var(--select-small-height);
-}
-
-.uk-control-select.uk-control-small.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-small.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
-    padding-left: var(--select-small-height);
-}
-
-.uk-control-select.uk-control-small.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: var(--select-small-height);
-    --clear-width: calc(var(--select-small-height) * 0.6777);
-    padding-left: calc(var(--arrow-width) + var(--clear-width));
-}
-
-/* Medium */
-.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-arrow .uk-select-clear {
-    left: var(--select-medium-height);
-}
-
-.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
-    padding-left: var(--select-medium-height);
-}
-
-.uk-control-select.uk-control-medium.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: var(--select-medium-height);
-    --clear-width: calc(var(--select-medium-height) * 0.6777);
-    padding-left: calc(var(--arrow-width) + var(--clear-width));
-}
-
-/* Large */
-.uk-control-select.uk-control-large.uk-control-rtl .uk-select-clear {
-    left: calc(var(--select-large-height) * 0.8667);
-}
-
-.uk-control-select.uk-control-large.uk-control-rtl .uk-select-allow-clear .uk-select-selector,
-.uk-control-select.uk-control-large.uk-control-rtl .uk-select-show-arrow .uk-select-selector {
-    padding-left: calc(var(--select-large-height) * 0.8667);
-}
-
-.uk-control-select.uk-control-large.uk-control-rtl .uk-select-allow-clear.uk-select-show-arrow .uk-select-selector {
-    --arrow-width: calc(var(--select-large-height) * 0.8667);
-    --clear-width: calc(var(--select-large-height) * 0.6777);
-    padding-left: calc(var(--arrow-width) + var(--clear-width));
-}
-
-.uk-control-select.uk-control-rtl .uk-select-selection-item-remove {
-    padding-left: var(--select-gutter);
-    padding-right: unset;
-}
-
-//
-// Dropdown
-//
-
-.uk-select-dropdown-rtl .uk-select-item-option-grouped {
-    padding-left: var(--select-gutter);
-    padding-right: calc(var(--control-padding-horizontal) * 2);
-}
-
-
-// Vars
-// ========================================================================
-
-:root {
-    --select-border: var(--control-border);
-    --select-border-style: var(--control-border-style);
-    --select-border-width: var(--control-border-width);
-    --select-border-radius: var(--control-border-radius);
-    --select-hover-border: var(--control-hover-border);
-    --select-focus-border: var(--control-focus-border);
-    --select-disabled-border: var(--control-disabled-border);
-    --select-height: var(--control-height);
-    --select-small-height: var(--control-small-height);
-    --select-medium-height: var(--control-medium-height);
-    --select-large-height: var(--control-large-height);
-    --select-arrow-icon-size: #{$select-arrow-icon-size};
-    --select-gutter: #{$select-gutter};
-    --select-small-gutter: #{$select-small-gutter};
-    --select-medium-gutter: #{$select-medium-gutter};
-    --select-large-gutter: #{$select-large-gutter};
-    --select-selector-padding-horizontal: var(--control-padding-horizontal);
-    --select-selector-small-padding-horizontal: var(--control-small-padding-horizontal);
-    --select-selector-medium-padding-horizontal: var(--control-medium-padding-horizontal);
-    --select-selector-large-padding-horizontal: var(--control-large-padding-horizontal);
-    --select-selection-search-input-color: var(--control-color);
-    --select-selection-placeholder-color: var(--control-placeholder-color);
-    --select-selection-item-background: var(--global-background);
-    --select-selection-item-border-radius: var(--control-border-radius);
-    --select-selection-item-font-size: #{$select-selection-item-font-size};
-    --select-selection-item-line-height: #{$select-selection-item-line-height};
-    --select-selection-item-remove-icon-size: var(--select-selection-item-font-size);
-    --select-selection-item-remove-icon-hover-color: var(--global-primary-background);
-    --select-dropdown-background: #{$select-dropdown-background};
-    --select-dropdown-border: var(--control-border);
-    --select-dropdown-border-style: var(--control-border-style);
-    --select-dropdown-border-width: var(--control-border-width);
-    --select-dropdown-border-radius: var(--control-border-radius);
-    --select-icon-color: var(--control-icon-color);
-    --select-icon-hover-color: var(--control-icon-hover-color);
-    --select-icon-disabled-color: var(--control-disabled-color);
-    --select-item-color: var(--control-color);
-    --select-item-line-height: #{$select-item-line-height};
-    --select-item-disabled-color: var(--control-disabled-color);
-    --select-item-selected-background: #{$select-item-selected-background};
-    --select-item-selected-state-color: var(--global-primary-background);
-    --select-item-active-background: var(--global-default-background);
-    --select-item-group-color: var(--global-muted-color);
-    --select-item-group-font-size: var(--global-small-font-size);
-    --select-item-group-text-transform: #{$select-item-group-text-transform};
-}