.vuiSelect {
  position: relative;
  max-width: $sizeL * 10;
  width: 100%;

  select {
    background-color: var(--vui-color-empty-shade);
    appearance: none;
    border-radius: $sizeXxs;
    border: 1px solid var(--vui-color-medium-shade);
    color: var(--vui-color-full-shade);
    width: 100%;
  }
}

.vuiSelect__caret {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: auto;
  right: 12px;
}

.vuiSelect--s {
  select {
    padding: $sizeXxs $sizeS;
    font-size: $fontSizeSmall;
    padding-right: 36px;
  }

  .vuiSelect__caret {
    top: calc(50% - 8px);
  }
}

.vuiSelect--m {
  select {
    padding: $sizeXs $sizeM;
    font-size: $fontSizeStandard;
    padding-right: 40px;
  }

  .vuiSelect__caret {
    top: calc(50% - 10px);
  }
}

.vuiSelect--l {
  select {
    padding: $sizeS $sizeM;
    font-size: $fontSizeLarge;
    padding-right: 48px;
  }

  .vuiSelect__caret {
    top: calc(50% - 14px);
  }
}

.vuiSelect-isInvalid {
  select {
    border-color: var(--vui-color-danger-shade);
  }
}

.vuiSelect--fullWidth {
  max-width: 100%;
}