UNPKG

@instawork/design-system

Version:

The design system for Instawork's web apps

924 lines (896 loc) 30.6 kB
.select2-container { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle; } .select2-container .select2-selection--single { -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; height: 28px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--single .select2-selection__rendered { display: block; padding-left: 8px; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-selection--single .select2-selection__clear { position: relative; } .select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px; } .select2-container .select2-selection--multiple { -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--multiple .select2-selection__rendered { display: inline-block; overflow: hidden; padding-left: 8px; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-search--inline { float: left; } .select2-container .select2-search--inline .select2-search__field { -webkit-box-sizing: border-box; box-sizing: border-box; border: none; font-size: 100%; margin-top: 5px; padding: 0; } .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-dropdown { background-color: white; border: 1px solid #aaa; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051; } .select2-results { display: block; } .select2-results__options { list-style: none; margin: 0; padding: 0; } .select2-results__option { padding: 6px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-results__option[aria-selected] { cursor: pointer; } .select2-container--open .select2-dropdown { left: 0; } .select2-container--open .select2-dropdown--above { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--open .select2-dropdown--below { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-search--dropdown { display: block; padding: 4px; } .select2-search--dropdown .select2-search__field { padding: 4px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-search--dropdown.select2-search--hide { display: none; } .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 99; background-color: #fff; filter: alpha(opacity=0); } .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } .select2-container--default .select2-selection--single { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow { left: 1px; right: auto; } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { display: none; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--default .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; margin: 0; padding: 0 5px; width: 100%; } .select2-container--default .select2-selection--multiple .select2-selection__rendered li { list-style: none; } .select2-container--default .select2-selection--multiple .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-top: 5px; margin-right: 10px; padding: 1px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #999; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #333; } .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline { float: right; } .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--default.select2-container--focus .select2-selection--multiple { border: solid black 1px; outline: 0; } .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection__choice__remove { display: none; } .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; } .select2-container--default .select2-search--inline .select2-search__field { background: transparent; border: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: textfield; } .select2-container--default .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--default .select2-results__option[role=group] { padding: 0; } .select2-container--default .select2-results__option[aria-disabled=true] { color: #999; } .select2-container--default .select2-results__option[aria-selected=true] { background-color: #ddd; } .select2-container--default .select2-results__option .select2-results__option { padding-left: 1em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__group { padding-left: 0; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option { margin-left: -1em; padding-left: 2em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -2em; padding-left: 3em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -3em; padding-left: 4em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -4em; padding-left: 5em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -5em; padding-left: 6em; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #5897fb; color: white; } .select2-container--default .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic .select2-selection--single { background-color: #f7f7f7; border: 1px solid #aaa; border-radius: 4px; outline: 0; background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%); background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, white), to(#eeeeee)); background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0); } .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--classic .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-right: 10px; } .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--classic .select2-selection--single .select2-selection__arrow { background-color: #ddd; border: none; border-left: 1px solid #aaa; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%); background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #eeeeee), to(#cccccc)); background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFCCCCCC", GradientType=0); } .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow { border: none; border-right: 1px solid #aaa; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; left: 1px; right: auto; } .select2-container--classic.select2-container--open .select2-selection--single { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { background: transparent; border: none; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%); background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%); background-image: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, #eeeeee)); background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0); } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%); background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #eeeeee), to(white)); background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFFFFFFF", GradientType=0); } .select2-container--classic .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; outline: 0; } .select2-container--classic .select2-selection--multiple:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--multiple .select2-selection__rendered { list-style: none; margin: 0; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__clear { display: none; } .select2-container--classic .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { color: #888; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #555; } .select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice { float: right; margin-left: 5px; margin-right: auto; } .select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--classic.select2-container--open .select2-selection--multiple { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--classic .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: 0; } .select2-container--classic .select2-search--inline .select2-search__field { outline: 0; -webkit-box-shadow: none; box-shadow: none; } .select2-container--classic .select2-dropdown { background-color: white; border: 1px solid transparent; } .select2-container--classic .select2-dropdown--above { border-bottom: none; } .select2-container--classic .select2-dropdown--below { border-top: none; } .select2-container--classic .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--classic .select2-results__option[role=group] { padding: 0; } .select2-container--classic .select2-results__option[aria-disabled=true] { color: grey; } .select2-container--classic .select2-results__option--highlighted[aria-selected] { background-color: #3875d7; color: white; } .select2-container--classic .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic.select2-container--open .select2-dropdown { border-color: #5897fb; } :root, .force-light, .force-light * { --base-color-string: 3, 24, 56; --text-color: #151519; --text-color-inverse: #ebebee; --text-color-light: #606373; --text-color-light-inverse: #c8cad1; --primary-color-string: 41, 82, 239; --primary-color: rgb(var(--primary-color-string)); --accent-color-string: 41, 82, 239; --accent-color: rgb(var(--accent-color-string)); --accent-color-light: rgba(var(--accent-color-string), 8%); --light-color-string: 255, 255, 255; --light-color: #FFF; --dark-color: #151519; --border-color: #dadbe0; --background-color: #fafbff; --card-background-color: #FFF; --hover-color-string: 20, 23, 30; --hover-color: rgba(var(--hover-color-string), 0.04); --background-color-inverse: var(--text-color); --icon-color: brightness(1); --shadow-color-string: 0, 0, 0; --shadow: 0 0.25rem 1rem rgba(var(--shadow-color-string), .04), 0 0.125rem 0.25rem rgba(var(--shadow-color-string), .08); --shadow-hover: 0.5rem 1rem rgba(var(--shadow-color-string), .08), 0 0.25rem 0 -0.125rem rgba(var(--shadow-color-string), .02), 0 0.125rem 1rem rgba(var(--shadow-color-string), .08); --shadow-focus: 0.5rem 1rem rgba(var(--shadow-color-string), .12), 0 0.25rem 0 -0.125rem rgba(var(--shadow-color-string), .02); --border-radius: 0.5rem; --bg-accent-default: #e6f2ff; --bg-accent-emphasis: #4778ff; --bg-celebration-default: #fef1cf; --bg-celebration-emphasis: #fbb90e; --bg-default: #ffffff; --bg-destructive-default: #fee6e6; --bg-destructive-emphasis: #ff4847; --bg-muted: #bdc4c4; --bg-subtle: #f4f4f4; --bg-success-default: #d6fecd; --bg-success-emphasis: #63cb76; --bg-warning-default: #fef1cf; --bg-warning-emphasis: #d99000; --border-accent: #4778ff; --border-default: #8d9494; --border-destructive: #ff4847; --border-muted: #e1e3e3; --border-on_emphasis: #ffffff; --border-success: #63cb76; --border-warning: #fbb90e; --button-bg-destructive-default: #ff4847; --button-bg-destructive-disabled: #bdc4c4; --button-bg-destructive-hover: #ffffff; --button-bg-destructive-loading: #ff9796; --button-bg-destructive-pressed: #d92b2b; --button-bg-primary-default: #4778ff; --button-bg-primary-disabled: #bdc4c4; --button-bg-primary-hover: #ffffff; --button-bg-primary-loading: #80aaff; --button-bg-primary-pressed: #255ccc; --button-border-destructive-default: #ff4847; --button-border-destructive-disabled: #bdc4c4; --button-border-destructive-hover: #ffffff; --button-border-destructive-loading: #ff9796; --button-border-destructive-pressed: #d92b2b; --button-border-primary-default: #4778ff; --button-border-primary-disabled: #bdc4c4; --button-border-primary-hover: #ffffff; --button-border-primary-loading: #80aaff; --button-border-primary-pressed: #255ccc; --button-fg-destructive-default: #ff4847; --button-fg-destructive-disabled: #bdc4c4; --button-fg-destructive-hover: #ffffff; --button-fg-destructive-loading: #ff9796; --button-fg-destructive-pressed: #d92b2b; --button-fg-on_emphasis: #ffffff; --button-fg-primary-default: #4778ff; --button-fg-primary-disabled: #bdc4c4; --button-fg-primary-hover: #ffffff; --button-fg-primary-loading: #80aaff; --button-fg-primary-pressed: #255ccc; --fg-accent-default: #4778ff; --fg-accent-emphasis: #3964bb; --fg-celebration-default: #fbb90e; --fg-celebration-emphasis: #d99000; --fg-default: #1f1f1f; --fg-destructive-default: #d92b2b; --fg-destructive-emphasis: #bb3939; --fg-muted: #4e4d4d; --fg-on_emphasis: #ffffff; --fg-subtle: #8d9494; --fg-success-default: #2db245; --fg-success-emphasis: #08771d; --fg-warning-default: #d99000; --fg-warning-emphasis: #946300; } .force-dark, .force-dark * { --text-color: #ebebee; --text-color-inverse: #606373; --text-color-light: #b7b9c3; --text-color-light-inverse: #606373; --icon-color: brightness(1); --light-color-string: 21, 21, 25; --light-color: #151519; --dark-color: #f9f9fa; --border-color: #373942; --background-color: #06070a; --hover-color-string: 250, 251, 255; --card-background-color: #151519; --shadow-color-string: 0, 0, 0; } .theme-info, .theme-info * { --primary-color-string: 131, 65, 163; --primary-color: rgb(var(--primary-color-string)); --primary-color-light: rgba(var(--primary-color-string), 8%); } .theme-warning, .theme-warning * { --primary-color-string: 224, 132, 45; --primary-color: rgb(var(--primary-color-string)); --primary-color-light: rgba(var(--primary-color-string), 8%); } .theme-danger, .theme-danger * { --primary-color-string: 219, 7, 61; --primary-color: rgb(var(--primary-color-string)); --primary-color-light: rgba(var(--primary-color-string), 8%); } .theme-success, .theme-success * { --primary-color-string: 43, 153, 72; --primary-color: rgb(var(--primary-color-string)); --primary-color-light: rgba(var(--primary-color-string), 8%); } .select2-container { display: block; } .select2-container *:focus { outline: 0; } .select2-container .select2-container .select2-search--inline { float: left; cursor: pointer; margin-top: 0.5rem; } .input-group .select2-container { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .input-group-prepend ~ .select2-container .select2-selection { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .select2-container:not(:last-child) .select2-selection { border-top-right-radius: 0; border-bottom-right-radius: 0; } .select2-container .select2-selection { background-color: var(--card-background-color); border: 2px solid var(--border-color); border-radius: var(--border-radius); -webkit-box-shadow: none; box-shadow: none; -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; width: 100%; } @media (prefers-reduced-motion: reduce) { .select2-container .select2-selection { -webkit-transition: none; -o-transition: none; transition: none; } } .select2-container.select2-container--open .select2-selection { border-color: rgba(var(--primary-color-string), 0.5); -webkit-box-shadow: 0 0.25rem 0.5rem rgba(41, 82, 239, 0.04), 0 0 0.25rem 0.125rem rgba(41, 82, 239, 0.16); box-shadow: 0 0.25rem 0.5rem rgba(41, 82, 239, 0.04), 0 0 0.25rem 0.125rem rgba(41, 82, 239, 0.16); border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container.select2-container--disabled .select2-selection, .select2-container.select2-container--disabled.select2-container--focus .select2-selection { background-color: var(--text-color-inverse); cursor: not-allowed; border-color: var(--border-color); -webkit-box-shadow: none; box-shadow: none; } .select2-container.select2-container--disabled .select2-search__field, .select2-container.select2-container--disabled.select2-container--focus .select2-search__field { background-color: transparent; } select.is-invalid ~ .select2-container .select2-selection, form.was-validated select:invalid ~ .select2-container .select2-selection { border-color: #db073d; } select.is-valid ~ .select2-container .select2-selection, form.was-validated select:valid ~ .select2-container .select2-selection { border-color: #36814a; } .select2-container .select2-dropdown { border-width: 2px; border-color: rgba(var(--primary-color-string), 0.5); -webkit-box-shadow: var(--shadow); box-shadow: var(--shadow); background: var(--card-background-color); } .select2-container .select2-dropdown.select2-dropdown--below { border-bottom-right-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); } .select2-container .select2-dropdown.select2-dropdown--above { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .select2-container .select2-dropdown .select2-results__option[aria-selected=true] { background-color: var(--text-color-inverse); } .select2-container .select2-results__option--highlighted, .select2-container .select2-results__option--highlighted.select2-results__option[aria-selected=true] { background-color: #2952ef; color: #f9f9fa; } .select2-container .select2-results__option[role=group] { padding: 0; } .select2-container .select2-results__option[role=group] .select2-results__options--nested .select2-results__option { padding: 0.5rem 1rem; } .select2-container .select2-results > .select2-results__options { max-height: 12rem; overflow-y: auto; } .select2-container .select2-results__group { margin-top: 0.5rem; padding-left: 1rem; display: list-item; color: var(--text-color); font-weight: bold; } .select2-container .select2-selection__clear { width: 0.9em; height: 0.9em; line-height: 0.75em; padding-left: 0.15em; margin-top: 0.7em; border-radius: 100%; background-color: var(--background-color); color: #f9f9fa; float: right; margin-right: 0.3em; } .select2-container .select2-selection__clear:hover { background-color: var(--hover-color); } .select2-container .select2-selection--single { height: calc(1.5em + 1.25rem + 4px) !important; } .select2-container .select2-selection--single .select2-selection__placeholder { color: var(--text-color-light); line-height: calc(1.5em + 1.25rem); } .select2-container .select2-selection--single .select2-selection__arrow { position: absolute; top: 0; right: 0; width: 2.45rem; height: 100%; } .select2-container .select2-selection--single .select2-selection__arrow b { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath d='m24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z'/%3E%3C/svg%3E") no-repeat right 1rem center/1.5rem 1.5rem; width: 100%; height: 100%; position: absolute; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + 1.25rem); padding-right: 2.45rem !important; } .select2-search__field { color: var(--text-color); background-color: var(--card-background-color); border: 2px solid var(--border-color); border-radius: var(--border-radius); } .select2-results__message { color: #676b7c; } .select2-container .select2-selection--multiple { min-height: calc(1.5em + 1.25rem + 4px) !important; } .select2-container .select2-selection--multiple .select2-selection__rendered { -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; margin: 0; padding: 0.125rem 1rem; width: 100%; } .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search__field { margin-top: 0.75rem; } .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search__field::-webkit-input-placeholder { color: var(--text-color-light); } .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search__field::-moz-placeholder { color: var(--text-color-light); } .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search__field:-ms-input-placeholder { color: var(--text-color-light); } .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search__field::-ms-input-placeholder { color: var(--text-color-light); } .select2-container .select2-selection--multiple .select2-selection__rendered .select2-search__field::placeholder { color: var(--text-color-light); } .select2-container .select2-selection--multiple .select2-selection__choice { color: var(--text-color); background: var(--text-color-inverse); border: 2px solid var(--border-color); border-radius: var(--border-radius); padding: 0.25rem 0.5rem; cursor: pointer; float: left; margin-top: 0.25rem; margin-bottom: 0.25rem; margin-right: 0.25rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .select2-container .select2-selection--multiple .select2-selection__choice__remove { font-size: 1.5rem; line-height: 1.5rem; margin-left: 0.5rem; } .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover { color: #151519; } .select2-container .select2-selection--multiple .select2-selection__clear { float: none; margin-right: 0; position: absolute !important; top: 0; right: 0.7em; } /*# sourceMappingURL=select2.css.map*/