@limetech/lime-elements
Version:
1,462 lines (1,412 loc) • 63.7 kB
CSS
@charset "UTF-8";
/*
* This file is imported into every component!
*
* Nothing in this file may output any CSS
* without being explicitly called by outside code.
*/
/**
* Note! This file is exported to `dist/scss/` in the published
* node module, for consumer projects to import.
* That means this file cannot import from any file that isn't
* also exported, keeping the same relative path.
*
* Or, just don't import anything, that works too.
*/
/**
* This can be used on a trigger element that opens a dropdown menu or a popover.
*/
/**
* This mixin will mask out the content that is close to
* the edges of a scrollable area.
* - If the scrollable content has `overflow-y`, use `vertically`
* as an argument for `$direction`.
- If the scrollable content has `overflow-x`, use `horizontally`
* as an argument for `$direction`.
*
* For the visual effect to work smoothly, we need to make sure that
* the size of the fade-out edge effect is the same as the
* internal paddings of the scrollable area. Otherwise, content of a
* scrollable area that does not have a padding will fade out before
* any scrolling has been done.
* This is why this mixin already adds paddings, which automatically
* default to the size of the fade-out effect.
* This size defaults to `1rem`, but to override the size use
* `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
* when `vertically` argument is set, and use
* `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
* when `horizontally` argument is set.
* Of course you can also programmatically increase and decrease the
* size of these variables for each edge, based on the amount of
* scrolling that has been done by the user. In this case, make sure
* to add a custom padding where the mixin is used, to override
* the paddings that are automatically added by the mixin in the
* compiled CSS code.
*/
/**
* This mixin will add an animated underline to the bottom of an `a` elements.
* Note that you may need to add `all: unset;` –depending on your use case–
* before using this mixin.
*/
/**
* This mixin creates a cross-browser font stack.
* - `sans-serif` can be used for the UI of the components.
* - `monospace` can be used for code.
*
* ⚠️ If we change the font stacks, we need to update
* 1. the consumer documentation in `README.md`, and
* 2. the CSS variables of `--kompendium-example-font-family`
* in the `<style>` tag of `index.html`.
*/
/**
* This mixin is a hack, using old CSS syntax
* to enable you to truncate a piece of text,
* after a certain number of lines.
*/
/**
* This mixin will add a chessboard background pattern,
* typically used to visualize transparency.
*/
/**
* Make a container resizable by the user.
* This is used in the documentations and examples
* of some components, to demonstrate how the component
* behaves in a resizable container.
*/
/**
* The breakpoints below are used to create responsive designs
* in Lime's products. Therefore, they are here to get distributed
* to all components in other private repos, which rely on this `mixins`
* file, to create consistent styles.
*
* :::important
* In very rare cases you should used media queries!
* Nowadays, there are many better ways of achieving responsive design
* without media queries. For example, using CSS Grid, Flexbox, and their features.
* :::
*/
/**
* Media query mixins for responsive design based on screen width.
* Note that these mixins do not detect the device type!
*/
.mdc-floating-label {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
/* @alternate */
font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: 1rem;
/* @alternate */
font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
font-weight: 400;
/* @alternate */
font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
letter-spacing: 0.009375em;
/* @alternate */
letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
text-decoration: inherit;
/* @alternate */
text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
text-transform: inherit;
/* @alternate */
text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
position: absolute;
/* @noflip */ /*rtl:ignore*/
left: 0;
/* @noflip */ /*rtl:ignore*/
-webkit-transform-origin: left top;
/* @noflip */ /*rtl:ignore*/
transform-origin: left top;
line-height: 1.15rem;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
cursor: text;
overflow: hidden;
/* @alternate */
will-change: transform;
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
[dir=rtl] .mdc-floating-label, .mdc-floating-label[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
right: 0;
/* @noflip */ /*rtl:ignore*/
left: auto;
/* @noflip */ /*rtl:ignore*/
-webkit-transform-origin: right top;
/* @noflip */ /*rtl:ignore*/
transform-origin: right top;
/* @noflip */ /*rtl:ignore*/
text-align: right;
/*rtl:end:ignore*/
}
.mdc-floating-label--float-above {
cursor: auto;
}
.mdc-floating-label--required::after {
/* @noflip */ /*rtl:ignore*/
margin-left: 1px;
/* @noflip */ /*rtl:ignore*/
margin-right: 0px;
content: "*";
}
[dir=rtl] .mdc-floating-label--required, .mdc-floating-label--required[dir=rtl] {
/*rtl:begin:ignore*/
/*rtl:end:ignore*/
}
[dir=rtl] .mdc-floating-label--required::after, .mdc-floating-label--required[dir=rtl]::after {
/* @noflip */ /*rtl:ignore*/
margin-left: 0;
/* @noflip */ /*rtl:ignore*/
margin-right: 1px;
}
.mdc-floating-label--float-above {
transform: translateY(-106%) scale(0.75);
}
.mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-standard 250ms 1;
}
@keyframes mdc-floating-label-shake-float-above-standard {
0% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
}
100% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
}
}
@keyframes mdc-ripple-fg-radius-in {
from {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
}
to {
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}
}
@keyframes mdc-ripple-fg-opacity-in {
from {
animation-timing-function: linear;
opacity: 0;
}
to {
opacity: var(--mdc-ripple-fg-opacity, 0);
}
}
@keyframes mdc-ripple-fg-opacity-out {
from {
animation-timing-function: linear;
opacity: var(--mdc-ripple-fg-opacity, 0);
}
to {
opacity: 0;
}
}
.mdc-line-ripple::before, .mdc-line-ripple::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom-style: solid;
content: "";
}
.mdc-line-ripple::before {
border-bottom-width: 1px;
z-index: 1;
}
.mdc-line-ripple::after {
transform: scaleX(0);
border-bottom-width: 2px;
opacity: 0;
z-index: 2;
}
.mdc-line-ripple::after {
transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mdc-line-ripple--active::after {
transform: scaleX(1);
opacity: 1;
}
.mdc-line-ripple--deactivating::after {
opacity: 0;
}
.mdc-notched-outline {
display: flex;
position: absolute;
top: 0;
right: 0;
left: 0;
box-sizing: border-box;
width: 100%;
max-width: 100%;
height: 100%;
/* @noflip */ /*rtl:ignore*/
text-align: left;
pointer-events: none;
}
[dir=rtl] .mdc-notched-outline, .mdc-notched-outline[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
text-align: right;
/*rtl:end:ignore*/
}
.mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
box-sizing: border-box;
height: 100%;
border-top: 1px solid;
border-bottom: 1px solid;
pointer-events: none;
}
.mdc-notched-outline__leading {
/* @noflip */ /*rtl:ignore*/
border-left: 1px solid;
/* @noflip */ /*rtl:ignore*/
border-right: none;
width: 12px;
}
[dir=rtl] .mdc-notched-outline__leading, .mdc-notched-outline__leading[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
border-left: none;
/* @noflip */ /*rtl:ignore*/
border-right: 1px solid;
/*rtl:end:ignore*/
}
.mdc-notched-outline__trailing {
/* @noflip */ /*rtl:ignore*/
border-left: none;
/* @noflip */ /*rtl:ignore*/
border-right: 1px solid;
flex-grow: 1;
}
[dir=rtl] .mdc-notched-outline__trailing, .mdc-notched-outline__trailing[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
border-left: 1px solid;
/* @noflip */ /*rtl:ignore*/
border-right: none;
/*rtl:end:ignore*/
}
.mdc-notched-outline__notch {
flex: 0 0 auto;
width: auto;
max-width: calc(100% - 12px * 2);
}
.mdc-notched-outline .mdc-floating-label {
display: inline-block;
position: relative;
max-width: 100%;
}
.mdc-notched-outline .mdc-floating-label--float-above {
text-overflow: clip;
}
.mdc-notched-outline--upgraded .mdc-floating-label--float-above {
max-width: 133.3333333333%;
}
.mdc-notched-outline--notched .mdc-notched-outline__notch {
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: 8px;
border-top: none;
}
[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch, .mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 8px;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
/*rtl:end:ignore*/
}
.mdc-notched-outline--no-label .mdc-notched-outline__notch {
display: none;
}
.mdc-select {
display: inline-flex;
position: relative;
}
.mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text {
color: rgba(0, 0, 0, 0.87);
}
.mdc-select.mdc-select--disabled .mdc-select__selected-text {
color: rgba(0, 0, 0, 0.38);
}
.mdc-select:not(.mdc-select--disabled) .mdc-floating-label {
color: rgba(0, 0, 0, 0.6);
}
.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
color: rgba(98, 0, 238, 0.87);
}
.mdc-select.mdc-select--disabled .mdc-floating-label {
color: rgba(0, 0, 0, 0.38);
}
.mdc-select:not(.mdc-select--disabled) .mdc-select__dropdown-icon {
fill: rgba(0, 0, 0, 0.54);
}
.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-select__dropdown-icon {
fill: #6200ee;
/* @alternate */
fill: var(--mdc-theme-primary, #6200ee);
}
.mdc-select.mdc-select--disabled .mdc-select__dropdown-icon {
fill: rgba(0, 0, 0, 0.38);
}
.mdc-select:not(.mdc-select--disabled) + .mdc-select-helper-text {
color: rgba(0, 0, 0, 0.6);
}
.mdc-select.mdc-select--disabled + .mdc-select-helper-text {
color: rgba(0, 0, 0, 0.38);
}
.mdc-select:not(.mdc-select--disabled) .mdc-select__icon {
color: rgba(0, 0, 0, 0.54);
}
.mdc-select.mdc-select--disabled .mdc-select__icon {
color: rgba(0, 0, 0, 0.38);
}
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
.mdc-select.mdc-select--disabled .mdc-select__selected-text {
color: GrayText;
}
.mdc-select.mdc-select--disabled .mdc-select__dropdown-icon {
fill: red;
}
.mdc-select.mdc-select--disabled .mdc-floating-label {
color: GrayText;
}
.mdc-select.mdc-select--disabled .mdc-line-ripple::before {
border-bottom-color: GrayText;
}
.mdc-select.mdc-select--disabled .mdc-notched-outline__leading,
.mdc-select.mdc-select--disabled .mdc-notched-outline__notch,
.mdc-select.mdc-select--disabled .mdc-notched-outline__trailing {
border-color: GrayText;
}
.mdc-select.mdc-select--disabled .mdc-select__icon {
color: GrayText;
}
.mdc-select.mdc-select--disabled + .mdc-select-helper-text {
color: GrayText;
}
}
.mdc-select .mdc-floating-label {
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.mdc-select .mdc-select__anchor {
/* @noflip */ /*rtl:ignore*/
padding-left: 16px;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
}
[dir=rtl] .mdc-select .mdc-select__anchor, .mdc-select .mdc-select__anchor[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: 16px;
/*rtl:end:ignore*/
}
.mdc-select.mdc-select--with-leading-icon .mdc-select__anchor {
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
}
[dir=rtl] .mdc-select.mdc-select--with-leading-icon .mdc-select__anchor, .mdc-select.mdc-select--with-leading-icon .mdc-select__anchor[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
/*rtl:end:ignore*/
}
.mdc-select .mdc-select__icon {
width: 24px;
height: 24px;
font-size: 24px;
}
.mdc-select .mdc-select__dropdown-icon {
width: 24px;
height: 24px;
}
.mdc-select .mdc-select__menu .mdc-deprecated-list-item {
/* @noflip */ /*rtl:ignore*/
padding-left: 16px;
/* @noflip */ /*rtl:ignore*/
padding-right: 16px;
}
[dir=rtl] .mdc-select .mdc-select__menu .mdc-deprecated-list-item, .mdc-select .mdc-select__menu .mdc-deprecated-list-item[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 16px;
/* @noflip */ /*rtl:ignore*/
padding-right: 16px;
/*rtl:end:ignore*/
}
.mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic {
/* @noflip */ /*rtl:ignore*/
margin-left: 0;
/* @noflip */ /*rtl:ignore*/
margin-right: 12px;
}
[dir=rtl] .mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic, .mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
margin-left: 12px;
/* @noflip */ /*rtl:ignore*/
margin-right: 0;
/*rtl:end:ignore*/
}
.mdc-select__dropdown-icon {
/* @noflip */ /*rtl:ignore*/
margin-left: 12px;
/* @noflip */ /*rtl:ignore*/
margin-right: 12px;
display: inline-flex;
position: relative;
align-self: center;
align-items: center;
justify-content: center;
flex-shrink: 0;
pointer-events: none;
}
.mdc-select__dropdown-icon .mdc-select__dropdown-icon-active,
.mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive {
position: absolute;
top: 0;
left: 0;
}
.mdc-select__dropdown-icon .mdc-select__dropdown-icon-graphic {
width: 41.6666666667%;
height: 20.8333333333%;
}
.mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive {
opacity: 1;
transition: opacity 75ms linear 75ms;
}
.mdc-select__dropdown-icon .mdc-select__dropdown-icon-active {
opacity: 0;
transition: opacity 75ms linear;
}
[dir=rtl] .mdc-select__dropdown-icon, .mdc-select__dropdown-icon[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
margin-left: 12px;
/* @noflip */ /*rtl:ignore*/
margin-right: 12px;
/*rtl:end:ignore*/
}
.mdc-select--activated .mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive {
opacity: 0;
transition: opacity 49.5ms linear;
}
.mdc-select--activated .mdc-select__dropdown-icon .mdc-select__dropdown-icon-active {
opacity: 1;
transition: opacity 100.5ms linear 49.5ms;
}
.mdc-select__anchor {
width: 200px;
min-width: 0;
flex: 1 1 auto;
position: relative;
box-sizing: border-box;
overflow: hidden;
outline: none;
cursor: pointer;
}
.mdc-select__anchor .mdc-floating-label--float-above {
transform: translateY(-106%) scale(0.75);
}
.mdc-select__selected-text-container {
display: flex;
appearance: none;
pointer-events: none;
box-sizing: border-box;
width: auto;
min-width: 0;
flex-grow: 1;
height: 28px;
border: none;
outline: none;
padding: 0;
background-color: transparent;
color: inherit;
}
.mdc-select__selected-text {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
/* @alternate */
font-family: var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
font-size: 1rem;
/* @alternate */
font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
line-height: 1.75rem;
/* @alternate */
line-height: var(--mdc-typography-subtitle1-line-height, 1.75rem);
font-weight: 400;
/* @alternate */
font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
letter-spacing: 0.009375em;
/* @alternate */
letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
text-decoration: inherit;
/* @alternate */
text-decoration: var(--mdc-typography-subtitle1-text-decoration, inherit);
text-transform: inherit;
/* @alternate */
text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
width: 100%;
/* @noflip */ /*rtl:ignore*/
text-align: left;
}
[dir=rtl] .mdc-select__selected-text, .mdc-select__selected-text[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
text-align: right;
/*rtl:end:ignore*/
}
.mdc-select--invalid:not(.mdc-select--disabled) .mdc-floating-label {
color: #b00020;
/* @alternate */
color: var(--mdc-theme-error, #b00020);
}
.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
color: #b00020;
/* @alternate */
color: var(--mdc-theme-error, #b00020);
}
.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--invalid + .mdc-select-helper-text--validation-msg {
color: #b00020;
/* @alternate */
color: var(--mdc-theme-error, #b00020);
}
.mdc-select--invalid:not(.mdc-select--disabled) .mdc-select__dropdown-icon {
fill: #b00020;
/* @alternate */
fill: var(--mdc-theme-error, #b00020);
}
.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-select__dropdown-icon {
fill: #b00020;
/* @alternate */
fill: var(--mdc-theme-error, #b00020);
}
.mdc-select--disabled {
cursor: default;
pointer-events: none;
}
.mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item {
/* @noflip */ /*rtl:ignore*/
padding-left: 12px;
/* @noflip */ /*rtl:ignore*/
padding-right: 12px;
}
[dir=rtl] .mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item, .mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 12px;
/* @noflip */ /*rtl:ignore*/
padding-right: 12px;
/*rtl:end:ignore*/
}
.mdc-select__menu .mdc-deprecated-list .mdc-select__icon,
.mdc-select__menu .mdc-list .mdc-select__icon {
/* @noflip */ /*rtl:ignore*/
margin-left: 0;
/* @noflip */ /*rtl:ignore*/
margin-right: 0;
}
[dir=rtl] .mdc-select__menu .mdc-deprecated-list .mdc-select__icon, [dir=rtl] .mdc-select__menu .mdc-list .mdc-select__icon, .mdc-select__menu .mdc-deprecated-list .mdc-select__icon[dir=rtl], .mdc-select__menu .mdc-list .mdc-select__icon[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
margin-left: 0;
/* @noflip */ /*rtl:ignore*/
margin-right: 0;
/*rtl:end:ignore*/
}
.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected,
.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--activated,
.mdc-select__menu .mdc-list .mdc-deprecated-list-item--selected,
.mdc-select__menu .mdc-list .mdc-deprecated-list-item--activated {
color: #000;
/* @alternate */
color: var(--mdc-theme-on-surface, #000);
}
.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__graphic,
.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic,
.mdc-select__menu .mdc-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__graphic,
.mdc-select__menu .mdc-list .mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic {
color: #000;
/* @alternate */
color: var(--mdc-theme-on-surface, #000);
}
.mdc-select__menu .mdc-list-item__start {
display: inline-flex;
align-items: center;
}
.mdc-select__option {
/* @noflip */ /*rtl:ignore*/
padding-left: 16px;
/* @noflip */ /*rtl:ignore*/
padding-right: 16px;
}
[dir=rtl] .mdc-select__option, .mdc-select__option[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 16px;
/* @noflip */ /*rtl:ignore*/
padding-right: 16px;
/*rtl:end:ignore*/
}
.mdc-select__one-line-option.mdc-list-item--with-one-line {
height: 48px;
}
.mdc-select__two-line-option.mdc-list-item--with-two-lines {
height: 64px;
}
.mdc-select__two-line-option.mdc-list-item--with-two-lines .mdc-list-item__start {
margin-top: 20px;
}
.mdc-select__two-line-option.mdc-list-item--with-two-lines .mdc-list-item__primary-text {
display: block;
margin-top: 0;
/* @alternate */
line-height: normal;
margin-bottom: -20px;
}
.mdc-select__two-line-option.mdc-list-item--with-two-lines .mdc-list-item__primary-text::before {
display: inline-block;
width: 0;
height: 28px;
content: "";
vertical-align: 0;
}
.mdc-select__two-line-option.mdc-list-item--with-two-lines .mdc-list-item__primary-text::after {
display: inline-block;
width: 0;
height: 20px;
content: "";
vertical-align: -20px;
}
.mdc-select__two-line-option.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end {
display: block;
margin-top: 0;
/* @alternate */
line-height: normal;
}
.mdc-select__two-line-option.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before {
display: inline-block;
width: 0;
height: 36px;
content: "";
vertical-align: 0;
}
.mdc-select__option-with-leading-content {
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: 12px;
}
.mdc-select__option-with-leading-content.mdc-list-item {
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: auto;
}
[dir=rtl] .mdc-select__option-with-leading-content.mdc-list-item, .mdc-select__option-with-leading-content.mdc-list-item[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: auto;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
/*rtl:end:ignore*/
}
.mdc-select__option-with-leading-content .mdc-list-item__start {
/* @noflip */ /*rtl:ignore*/
margin-left: 12px;
/* @noflip */ /*rtl:ignore*/
margin-right: 0;
}
[dir=rtl] .mdc-select__option-with-leading-content .mdc-list-item__start, .mdc-select__option-with-leading-content .mdc-list-item__start[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
margin-left: 0;
/* @noflip */ /*rtl:ignore*/
margin-right: 12px;
/*rtl:end:ignore*/
}
.mdc-select__option-with-leading-content .mdc-list-item__start {
width: 36px;
height: 24px;
}
[dir=rtl] .mdc-select__option-with-leading-content, .mdc-select__option-with-leading-content[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 12px;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
/*rtl:end:ignore*/
}
.mdc-select__option-with-meta.mdc-list-item {
/* @noflip */ /*rtl:ignore*/
padding-left: auto;
/* @noflip */ /*rtl:ignore*/
padding-right: 0;
}
[dir=rtl] .mdc-select__option-with-meta.mdc-list-item, .mdc-select__option-with-meta.mdc-list-item[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/* @noflip */ /*rtl:ignore*/
padding-right: auto;
/*rtl:end:ignore*/
}
.mdc-select__option-with-meta .mdc-list-item__end {
/* @noflip */ /*rtl:ignore*/
margin-left: 12px;
/* @noflip */ /*rtl:ignore*/
margin-right: 12px;
}
[dir=rtl] .mdc-select__option-with-meta .mdc-list-item__end, .mdc-select__option-with-meta .mdc-list-item__end[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
margin-left: 12px;
/* @noflip */ /*rtl:ignore*/
margin-right: 12px;
/*rtl:end:ignore*/
}
.mdc-select--filled .mdc-select__anchor {
height: 56px;
display: flex;
align-items: baseline;
}
.mdc-select--filled .mdc-select__anchor::before {
display: inline-block;
width: 0;
height: 40px;
content: "";
vertical-align: 0;
}
.mdc-select--filled.mdc-select--no-label .mdc-select__anchor .mdc-select__selected-text::before {
content: "";
}
.mdc-select--filled.mdc-select--no-label .mdc-select__anchor .mdc-select__selected-text-container {
height: 100%;
display: inline-flex;
align-items: center;
}
.mdc-select--filled.mdc-select--no-label .mdc-select__anchor::before {
display: none;
}
.mdc-select--filled .mdc-select__anchor {
border-top-left-radius: 4px;
/* @alternate */
border-top-left-radius: var(--mdc-shape-small, 4px);
border-top-right-radius: 4px;
/* @alternate */
border-top-right-radius: var(--mdc-shape-small, 4px);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.mdc-select--filled:not(.mdc-select--disabled) .mdc-select__anchor {
background-color: whitesmoke;
}
.mdc-select--filled.mdc-select--disabled .mdc-select__anchor {
background-color: #fafafa;
}
.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, 0.42);
}
.mdc-select--filled:not(.mdc-select--disabled):hover .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, 0.87);
}
.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple::after {
border-bottom-color: #6200ee;
/* @alternate */
border-bottom-color: var(--mdc-theme-primary, #6200ee);
}
.mdc-select--filled.mdc-select--disabled .mdc-line-ripple::before {
border-bottom-color: rgba(0, 0, 0, 0.06);
}
.mdc-select--filled .mdc-floating-label {
max-width: calc(100% - 64px);
}
.mdc-select--filled .mdc-floating-label--float-above {
max-width: calc(100% / 0.75 - 64px / 0.75);
}
.mdc-select--filled .mdc-menu-surface--is-open-below {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.mdc-select--filled.mdc-select--focused.mdc-line-ripple::after {
transform: scale(1, 2);
opacity: 1;
}
.mdc-select--filled .mdc-floating-label {
/* @noflip */ /*rtl:ignore*/
left: 16px;
/* @noflip */ /*rtl:ignore*/
right: initial;
}
[dir=rtl] .mdc-select--filled .mdc-floating-label, .mdc-select--filled .mdc-floating-label[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
left: initial;
/* @noflip */ /*rtl:ignore*/
right: 16px;
/*rtl:end:ignore*/
}
.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label {
/* @noflip */ /*rtl:ignore*/
left: 48px;
/* @noflip */ /*rtl:ignore*/
right: initial;
}
[dir=rtl] .mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label, .mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
left: initial;
/* @noflip */ /*rtl:ignore*/
right: 48px;
/*rtl:end:ignore*/
}
.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label {
max-width: calc(100% - 96px);
}
.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label--float-above {
max-width: calc(100% / 0.75 - 96px / 0.75);
}
.mdc-select--invalid:not(.mdc-select--disabled) .mdc-line-ripple::before {
border-bottom-color: #b00020;
/* @alternate */
border-bottom-color: var(--mdc-theme-error, #b00020);
}
.mdc-select--invalid:not(.mdc-select--disabled):hover .mdc-line-ripple::before {
border-bottom-color: #b00020;
/* @alternate */
border-bottom-color: var(--mdc-theme-error, #b00020);
}
.mdc-select--invalid:not(.mdc-select--disabled) .mdc-line-ripple::after {
border-bottom-color: #b00020;
/* @alternate */
border-bottom-color: var(--mdc-theme-error, #b00020);
}
.mdc-select--outlined {
border: none;
}
.mdc-select--outlined .mdc-select__anchor {
height: 56px;
}
.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above {
transform: translateY(-37.25px) scale(1);
}
.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above {
font-size: 0.75rem;
}
.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
transform: translateY(-34.75px) scale(0.75);
}
.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
font-size: 1rem;
}
.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-select-outlined-56px 250ms 1;
}
@keyframes mdc-floating-label-shake-float-above-select-outlined-56px {
0% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
}
100% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
}
}
.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading {
/* @noflip */ /*rtl:ignore*/
border-top-left-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-top-left-radius: var(--mdc-shape-small, 4px);
/* @noflip */ /*rtl:ignore*/
border-top-right-radius: 0;
/* @noflip */ /*rtl:ignore*/
border-bottom-right-radius: 0;
/* @noflip */ /*rtl:ignore*/
border-bottom-left-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-bottom-left-radius: var(--mdc-shape-small, 4px);
}
[dir=rtl] .mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading, .mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
border-top-left-radius: 0;
/* @noflip */ /*rtl:ignore*/
border-top-right-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-top-right-radius: var(--mdc-shape-small, 4px);
/* @noflip */ /*rtl:ignore*/
border-bottom-right-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-bottom-right-radius: var(--mdc-shape-small, 4px);
/* @noflip */ /*rtl:ignore*/
border-bottom-left-radius: 0;
/*rtl:end:ignore*/
}
@supports (top: max(0%)) {
.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading {
width: max(12px, var(--mdc-shape-small, 4px));
}
}
@supports (top: max(0%)) {
.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__notch {
max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);
}
}
.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
/* @noflip */ /*rtl:ignore*/
border-top-left-radius: 0;
/* @noflip */ /*rtl:ignore*/
border-top-right-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-top-right-radius: var(--mdc-shape-small, 4px);
/* @noflip */ /*rtl:ignore*/
border-bottom-right-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-bottom-right-radius: var(--mdc-shape-small, 4px);
/* @noflip */ /*rtl:ignore*/
border-bottom-left-radius: 0;
}
[dir=rtl] .mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing, .mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
border-top-left-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-top-left-radius: var(--mdc-shape-small, 4px);
/* @noflip */ /*rtl:ignore*/
border-top-right-radius: 0;
/* @noflip */ /*rtl:ignore*/
border-bottom-right-radius: 0;
/* @noflip */ /*rtl:ignore*/
border-bottom-left-radius: 4px;
/* @alternate */
/* @noflip */ /*rtl:ignore*/
border-bottom-left-radius: var(--mdc-shape-small, 4px);
/*rtl:end:ignore*/
}
@supports (top: max(0%)) {
.mdc-select--outlined .mdc-select__anchor {
/* @noflip */ /*rtl:ignore*/
padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
}
}
[dir=rtl] .mdc-select--outlined .mdc-select__anchor, .mdc-select--outlined .mdc-select__anchor[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
padding-left: 0;
/*rtl:end:ignore*/
}
@supports (top: max(0%)) {
[dir=rtl] .mdc-select--outlined .mdc-select__anchor, .mdc-select--outlined .mdc-select__anchor[dir=rtl] {
/* @noflip */ /*rtl:ignore*/
padding-right: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
}
}
@supports (top: max(0%)) {
.mdc-select--outlined + .mdc-select-helper-text {
/* @noflip */ /*rtl:ignore*/
margin-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
}
}
[dir=rtl] .mdc-select--outlined + .mdc-select-helper-text, .mdc-select--outlined + .mdc-select-helper-text[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
margin-left: 0;
/*rtl:end:ignore*/
}
@supports (top: max(0%)) {
[dir=rtl] .mdc-select--outlined + .mdc-select-helper-text, .mdc-select--outlined + .mdc-select-helper-text[dir=rtl] {
/* @noflip */ /*rtl:ignore*/
margin-right: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));
}
}
.mdc-select--outlined:not(.mdc-select--disabled) .mdc-select__anchor {
background-color: transparent;
}
.mdc-select--outlined.mdc-select--disabled .mdc-select__anchor {
background-color: transparent;
}
.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__leading,
.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__notch,
.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__trailing {
border-color: rgba(0, 0, 0, 0.38);
}
.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: rgba(0, 0, 0, 0.87);
}
.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing {
border-width: 2px;
}
.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: #6200ee;
/* @alternate */
border-color: var(--mdc-theme-primary, #6200ee);
}
.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__leading,
.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__notch,
.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__trailing {
border-color: rgba(0, 0, 0, 0.06);
}
.mdc-select--outlined .mdc-select__anchor :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
max-width: calc(100% - 60px);
}
.mdc-select--outlined .mdc-select__anchor {
display: flex;
align-items: baseline;
overflow: visible;
}
.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-select-outlined 250ms 1;
}
.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above {
transform: translateY(-37.25px) scale(1);
}
.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above {
font-size: 0.75rem;
}
.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
transform: translateY(-34.75px) scale(0.75);
}
.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
font-size: 1rem;
}
.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 1px;
}
.mdc-select--outlined .mdc-select__anchor .mdc-select__selected-text::before {
content: "";
}
.mdc-select--outlined .mdc-select__anchor .mdc-select__selected-text-container {
height: 100%;
display: inline-flex;
align-items: center;
}
.mdc-select--outlined .mdc-select__anchor::before {
display: none;
}
.mdc-select--outlined .mdc-select__selected-text-container {
display: flex;
border: none;
z-index: 1;
background-color: transparent;
}
.mdc-select--outlined .mdc-select__icon {
z-index: 2;
}
.mdc-select--outlined .mdc-floating-label {
line-height: 1.15rem;
/* @noflip */ /*rtl:ignore*/
left: 4px;
/* @noflip */ /*rtl:ignore*/
right: initial;
}
[dir=rtl] .mdc-select--outlined .mdc-floating-label, .mdc-select--outlined .mdc-floating-label[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
left: initial;
/* @noflip */ /*rtl:ignore*/
right: 4px;
/*rtl:end:ignore*/
}
.mdc-select--outlined.mdc-select--focused .mdc-notched-outline--notched .mdc-notched-outline__notch {
padding-top: 2px;
}
.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__leading,
.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__notch,
.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__trailing {
border-color: #b00020;
/* @alternate */
border-color: var(--mdc-theme-error, #b00020);
}
.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: #b00020;
/* @alternate */
border-color: var(--mdc-theme-error, #b00020);
}
.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing {
border-width: 2px;
}
.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing {
border-color: #b00020;
/* @alternate */
border-color: var(--mdc-theme-error, #b00020);
}
.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label {
/* @noflip */ /*rtl:ignore*/
left: 36px;
/* @noflip */ /*rtl:ignore*/
right: initial;
}
[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label, .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
left: initial;
/* @noflip */ /*rtl:ignore*/
right: 36px;
/*rtl:end:ignore*/
}
.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above {
/* @noflip */ /*rtl:ignore*/
transform: translateY(-37.25px) translateX(-32px) scale(1);
}
[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above, .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
transform: translateY(-37.25px) translateX(32px) scale(1);
/*rtl:end:ignore*/
}
.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above {
font-size: 0.75rem;
}
.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
/* @noflip */ /*rtl:ignore*/
transform: translateY(-34.75px) translateX(-32px) scale(0.75);
}
[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above, [dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above, .mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl], .mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl] {
/*rtl:begin:ignore*/
/* @noflip */ /*rtl:ignore*/
transform: translateY(-34.75px) translateX(32px) scale(0.75);
/*rtl:end:ignore*/
}
.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
font-size: 1rem;
}
.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px 250ms 1;
}
@keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px {
0% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
}
100% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
}
}
[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon, .mdc-select--outlined.mdc-select--with-leading-icon[dir=rtl] {
/*rtl:begin:ignore*/
/*rtl:end:ignore*/
}
[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--shake, .mdc-select--outlined.mdc-select--with-leading-icon[dir=rtl] .mdc-floating-label--shake {
animation: mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px 250ms 1;
}
@keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px-rtl {
0% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
}
33% {
animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
}
66% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
}
100% {
/* @noflip */ /*rtl:ignore*/
transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
}
}
.mdc-select--outlined.mdc-select--with-leading-icon .mdc-select__anchor :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
max-width: calc(100% - 96px);
}
.mdc-select--outlined .mdc-menu-surface {
margin-bottom: 8px;
}
.mdc-select--outlined.mdc-select--no-label .mdc-menu-surface,
.mdc-select--outlined .mdc-menu-surface--is-open-below {
margin-bottom: 0;
}
.mdc-select__anchor {
--mdc-ripple-fg-size: 0;
--mdc-ripple-left: 0;
--mdc-ripple-top: 0;
--mdc-ripple-fg-scale: 1;
--mdc-ripple-fg-translate-end: 0;
--mdc-ripple-fg-translate-start: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
will-change: transform, opacity;
}
.mdc-select__anchor .mdc-select__ripple::before,
.mdc-select__anchor .mdc-select__ripple::after {
position: absolute;
border-radius: 50%;
opacity: 0;
pointer-events: none;
content: "";
}
.mdc-select__anchor .mdc-select__ripple::before {
transition: opacity 15ms linear, background-color 15ms linear;
z-index: 1;
/* @alternate */
z-index: var(--mdc-ripple-z-index, 1);
}
.mdc-select__anchor .mdc-select__ripple::after {
z-index: 0;
/* @alternate */
z-index: var(--mdc-ripple-z-index, 0);
}
.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple::before {
transform: scale(var(--mdc-ripple-fg-scale, 1));
}
.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple::after {
top: 0;
/* @noflip */ /*rtl:ignore*/
left: 0;
transform: scale(0);
transform-origin: center center;
}
.mdc-select__anchor.mdc-ripple-upgraded--unbounded .mdc-select__ripple::after {
top: var(--mdc-ripple-top, 0);
/* @noflip */ /*rtl:ignore*/
left: var(--mdc-ripple-left, 0);
}
.mdc-select__anchor.mdc-ripple-upgraded--foreground-activation .mdc-select__ripple::after {
animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
}
.mdc-select__anchor.mdc-ripple-upgraded--foreground-deactivation .mdc-select__ripple::after {
animation: mdc-ripple-fg-opacity-out 150ms;
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
}
.mdc-select__anchor .mdc-select__ripple::before,
.mdc-select__anchor .mdc-select__ripple::after {
top: calc(50% - 100%);
/* @noflip */ /*rtl:ignore*/
left: calc(50% - 100%);
width: 200%;
height: 200%;
}
.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple::after {
width: var(--mdc-ripple-fg-size, 100%);
height: var(--mdc-ripple-fg-size, 100%);
}
.mdc-select__anchor .mdc-select__ripple::before,
.mdc-select__anchor .mdc-select__ripple::after {
background-color: rgba(0, 0, 0, 0.87);
/* @alternate */
background-color: var(--mdc-ripple-color, rgba(0, 0, 0, 0.87));
}
.mdc-select__anchor:hover .mdc-select__ripple::before, .mdc-select__anchor.mdc-ripple-surface--hover .mdc-select__ripple::before {
opacity: 0.04;
/* @alternate */
opacity: var(--mdc-ripple-hover-opacity, 0.04);
}
.mdc-select__anchor.mdc-ripple-upgraded--background-focused .mdc-select__ripple::before, .mdc-select__anchor:not(.mdc-ripple-upgraded):focus .mdc-select__ripple::before {
transition-duration: 75ms;
opacity: 0.12;
/* @alternate */
opacity: var(--mdc-ripple-focus-opacity, 0.12);
}
.mdc-select__anchor .mdc-select__ripple {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple::before, .mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple::after {
background-color: #000;
/* @alternate */
background-color: var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000));
}
.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:hover .mdc-deprecated-list-item__ripple::before, .mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-surface--hover .mdc-deprecated-list-item__ripple::before {
opacity: 0.04;
/* @alternate */
opacity: var(--mdc-ripple-hover-opacity, 0.04);
}
.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-deprecated-list-item__ripple::before, .mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-deprecated-list-item__ripple::before {
transition-duration: 75ms;
opacity: 0.12;
/* @alternate */
opacity: var(--mdc-ripple-focus-opacity, 0.12);
}
.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded) .mdc-deprecated-list-item__ripple::after {
transition: opacity 150ms linear;
}
.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-deprecated-list-item__ripple::after {
transition-duration: 75ms;
opacity: 0.12;
/* @alternate */
opacity: var(--mdc-ripple-press-opacity, 0.12);
}
.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded {
--mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
}
.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-list-item__ripple::before, .mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-list-item__ripple::after {
background-color: #00