/* ==========================================================================
 * Select
 * ========================================================================== */

.mds-c-select {
  --mds-v-control__cursor: pointer;
  --mds-v-select--placeholder-color: var(--mds-t-text-color--tertiary);

  background-image: svg-load(
    '../../momentum-icons/dist/svg/chevron-down.svg',
    fill: $color-ui--5
  );
  background-position: right var(--mds-v-control__padding--horizontal) center;
  background-size: var(--mds-v-control__icon-size);
  padding-right: calc(
    var(--mds-v-control__padding--horizontal) + var(--mds-v-control__icon-gap) +
      var(--mds-v-control__icon-size)
  );

  &--placeholder {
    color: var(--mds-v-select--placeholder-color);
  }

  &.mds-has-error:not(:focus),
  &.mds-has-error:not(:focus-visible) {
    background-image: svg-load(
      '../../momentum-icons/dist/svg/chevron-down.svg',
      fill: $status-color-danger--default
    );
  }

  &::-ms-expand {
    display: none;
  }

  .mds-c-select-option {
    color: var(--mds-t-text-color--primary);

    &[value='']:disabled {
      display: none;
    }

    &--placeholder {
      color: var(--mds-v-select--placeholder-color);
    }
  }

  /* https://stackoverflow.com/questions/19451183/cannot-remove-outline-dotted-border-from-firefox-select-drop-down */
  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
  }
}