:root {
  --select-size-small: 32px;
  --select-size-medium: 42px;
  --select-size-large: 56px; }

.select-native--custom {
  position: relative;
  display: flex;
  min-width: 78px; }
  .select-native--custom.size-small {
    max-height: var(--select-size-small);
    min-height: var(--select-size-small); }
    .select-native--custom.size-small select {
      font-size: 12px; }
    .select-native--custom.size-small svg {
      bottom: 4px; }
  .select-native--custom.size-medium {
    min-height: var(--select-size-medium);
    max-height: var(--select-size-medium); }
    .select-native--custom.size-medium select {
      font-size: 14px; }
    .select-native--custom.size-medium svg {
      bottom: 10px; }
  .select-native--custom.size-large {
    min-height: var(--select-size-large);
    max-height: var(--select-size-large); }
    .select-native--custom.size-large select {
      font-size: 16px; }
    .select-native--custom.size-large svg {
      bottom: 18px; }
  .select-native--custom span, .select-native--custom svg {
    position: absolute; }
  .select-native--custom select {
    appearance: none;
    padding: 0 16px;
    max-width: 100%;
    background: transparent;
    border-radius: 4px;
    border: 1px solid rgb(var(--color-on-surface--rgb)/0.6);
    overflow: hidden;
    outline: none;
    flex: 1;
    font-family: inherit;
    font-weight: var(--typescale-body-small-font-weight);
    letter-spacing: var(--typescale-body-small-letter-spacing);
    cursor: pointer;
    background: var(--color-background);
    color: var(--color-on-background); }
    .select-native--custom select:focus {
      border-color: var(--color-primary);
      box-shadow: inset 0 1px var(--color-primary), inset 1px 0 var(--color-primary), inset -1px 0 var(--color-primary), inset 0 -1px var(--color-primary); }
      .select-native--custom select:focus ~ svg {
        rotate: 180deg; }
  .select-native--custom svg {
    right: 0;
    margin-right: 1px;
    fill: var(--color-on-background);
    pointer-events: none; }
  .select-native--custom.outlined {
    padding-top: 6px; }
    .select-native--custom.outlined span {
      left: 0;
      font-weight: var(--typescale-body-medium-font-weight);
      font-size: 12px;
      letter-spacing: var(--typescale-body-medium-letter-spacing);
      cursor: text;
      user-select: none;
      border-color: rgb(var(--color-on-surface--rgb)/0.6);
      color: rgb(var(--color-on-surface--rgb)/0.7);
      transition: color 0.2s ease 0s;
      align-items: center;
      display: flex;
      flex: 1;
      width: 100%;
      top: 0; }
      .select-native--custom.outlined span::before, .select-native--custom.outlined span::after {
        content: "";
        min-width: 12px;
        height: 8px;
        margin-top: 6px;
        pointer-events: none;
        box-sizing: border-box;
        border-top: 1px solid rgb(var(--color-on-surface--rgb)/0.6);
        box-shadow: transparent 0 1px inset;
        transition: box-shadow 0.2s ease 0s; }
      .select-native--custom.outlined span::before {
        margin-right: 4px;
        border-left: 1px solid rgb(var(--color-on-surface--rgb)/0.6);
        border-radius: 4px 0; }
      .select-native--custom.outlined span::after {
        flex: 1;
        margin-left: 4px;
        border-right: 1px solid rgb(var(--color-on-surface--rgb)/0.6);
        border-radius: 0 4px; }
    .select-native--custom.outlined select {
      border-top: 0; }
      .select-native--custom.outlined select:focus {
        box-shadow: inset 1px 0 var(--color-primary), inset -1px 0 var(--color-primary), inset 0 -1px var(--color-primary); }
        .select-native--custom.outlined select:focus + span {
          color: var(--color-primary); }
          .select-native--custom.outlined select:focus + span::before, .select-native--custom.outlined select:focus + span::after {
            box-shadow: inset 0 1px var(--color-primary), inset 0 1px var(--color-primary);
            border-color: var(--color-primary); }
    .select-native--custom.outlined.size-small svg {
      bottom: 1px; }
    .select-native--custom.outlined.size-medium svg {
      bottom: 6px; }
    .select-native--custom.outlined.size-large svg {
      bottom: 15px; }

/*# sourceMappingURL=select.css.map */