.styled-select {
  display: inline-block;
  line-height: 1;
  position: relative;
  white-space: nowrap;

  select:not([multiple]) {
    appearance: none;
    padding-right: 2ch;
  }

  &__caret {
    pointer-events: none;
    position: absolute;

    :disabled + & {
      color: var(--fg-grey);
    }
  }

  &__caret {
    border-left: 0.5ch solid transparent;
    border-right: 0.5ch solid transparent;
    border-top: 0.5ch solid;
    display: none;
    top: calc(50% - 0.25ch);
    right: calc(1px + 0.5ch);

    select:not([multiple]) + & {
      display: unset;
    }

    :focus + & {
      border-top: none;
      border-bottom: solid 0.5ch;
    }
  }
}