.select {
  display: flex;
  align-items: center;

  label {
    display: flex;
  }

  .select-wrapper {
    display: flex;
    flex-grow: 3;
    border: 1px solid $gray;
    border-radius: 6px;
    background: url("/images/svg/icons/caret.svg") calc(100% - 12px) no-repeat;
    background-size: 1rem;

    select {
      width: 100%;
      font-size: inherit;
      outline: none;
      border: 0;
      padding: 12px 40px 12px 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      background: transparent;

      &[disabled] {
        background-color: $gray-light;
        border-color: $gray-medium;
        color: $gray;

        &:hover {
          cursor: not-allowed;
          opacity: 1;
        }
      }

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

  &.column-align {
    align-items: flex-start;
    flex-direction: column;

    label {
      margin-bottom: .375rem;
    }
  }

  &.select-with-input {
    .select-wrapper {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    + .form-field-group input {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: 0;
      margin-bottom: 0;
    }
  }
}