@use '../core/variables' as *;
@use '../core/mixins' as *;

form {
  .muted {
    font-size: 75%;
    color: $gray-light;
    text-indent: 0;
    padding: 10px;
  }
}

.select {
  position: relative;
  cursor: pointer;

  select {
    appearance: none;
    min-width: 120px;
    padding: 0 30px 0 10px;
    margin: 0 .25rem;

    &:focus {
      outline: none;
    }
  }

  &:after {
    font: $site-font-icon;
    content: 'expand_more';
    vertical-align: bottom;
    display: block;
    position: absolute;
    right: .5rem;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 20px;
    color: $gray-dark;
    pointer-events: none;
    @include transition();
  }
}

input, select {
  line-height: 32px;
  height: 32px;
  margin: 4px 0;
  padding: 0 10px;
  border: none;
  border-radius: 0;
  font-size: 13px;
  cursor: pointer;
  background-color: $gray-light;
  color: $gray-dark;

  &:focus, &:active {
    outline-color: #fff;
  }
}
