@import '@teamleader/ui-colors';
@import '@teamleader/ui-utilities';
@import '@teamleader/ui-typography';

.select {
  composes: reset-font-smoothing;
  font-family: var(--font-family-regular);
  font-size: calc(1.4 * var(--unit));
  border-color: var(--color-neutral-dark);
}

.dropdown-indicator {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 20px;
}

.is-large .dropdown-indicator {
  width: 24px;
}

.validation-icon {
  margin-top: -1px;
}

.has-error {
  &:not(.is-inverse) .validation-text {
    color: var(--color-ruby-dark);
  }

  &.is-inverse .validation-text {
    color: var(--color-ruby-light);
  }
}

@import '@teamleader/ui-colors';
@import '@teamleader/ui-utilities';
@import '@teamleader/ui-typography';

.select {
  composes: reset-font-smoothing;
  font-family: var(--font-family-regular);
  font-size: calc(1.4 * var(--unit));
  border-color: var(--color-neutral-dark);
}

.dropdown-indicator {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 30px;
}

.is-large .dropdown-indicator {
  width: 36px;
}

.validation-icon {
  margin-top: -1px;
}

.has-error {
  &:not(.is-inverse) .validation-text {
    color: var(--color-ruby-dark);
  }

  &.is-inverse .validation-text {
    color: var(--color-ruby-light);
  }
}

Adjust the drop down indicator arrow width to increase the margin between border and arrow
Adjust the drop down indicator arrow width to increase the margin between border and arrow
