@import '../../../styles/core.scss';

.Select {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  position: relative;

  &-Input {
    appearance: none;
    background: get(color 'lightGray');
    border: 2px solid transparent;
    border-radius: 6px;
    height: 40px;
    font-size: inherit;
    color: get(color 'graphite');
    padding: 0 ms(5) 0 ms(-1);
    transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;

    &:disabled {
      background: get(color 'ivory');
      color: get(color 'graphite');
      cursor: not-allowed;
    }

    &:focus {
      background: #fff;
      border: 2px solid get(color 'blue');
      box-shadow: 0 0 0 3px rgba(get(color 'blue'), 0.25);
      outline: 0;
    }

    &_invalid,
    &:invalid {
      border-color: get(color 'red');

      &:focus {
        border-color: get(color 'red');
        box-shadow: 0 0 0 3px rgba(get(color 'red'), 0.4);
      }
    }

    &_sm {
      font-size: ms(-1);
      height: 30px;
    }

    &_md {
      font-size: ms(0);
      height: 40px;
    }

    &_lg {
      font-size: ms(1);
      height: 50px;
    }
  }

  &::after {
    bottom: auto;
    color: get(color chalk);
    content: '▼';
    display: block;
    font-size: 13px;
    position: absolute;
    right: ms(-2);
    top: auto;
  }
}