$select-padding: 7px 30px 7px 13px;
$select-border-radius: 12px;
$select-border-width:2px;
$select-min-width: 200px;
$select-option-background-color: $white;
$select-option-darkestGray: $darkestGray;

.select {
  padding: $select-padding;
  border: $select-border-width solid transparent;
  border-radius: $select-border-radius;
  background-color: $gray;
  color: $darkestGray;
  min-width: $select-min-width;

  @each $color, $value in $colors {
    &.#{$color} {
      &:active,
      &:focus {
        border-bottom-color: $value;
      }

      &.flat {
        background-color: tint($value, 85%);
      }

      &.bordered {
        border-bottom-color: $value;
      }
    }
  }

  option {
    background-color: $select-option-background-color;
    color: $select-option-darkestGray;
  }

  &.square {
    border-radius: 0;
  }
}