/**
 * Select
 *
 * Custom select styles inspired by http://wtfforms.com/.
 */

.select {
  color: var(--color-input-color);
  font-size: var(--font-size);
  line-height: var(--line-height);
  position: relative;

  & select {
    appearance: none;
    background: var(--color-input-background);
    border: thin solid var(--color-input-border);
    border-radius: var(--border-radius);
    color: inherit;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: var(--padding);
    padding-right: 2.5em;
    transition: box-shadow var(--transition-duration);
    width: 100%;

    &.form-control:focus {
      border-color: var(--color-input-border);
    }
    &:focus {
      box-shadow: 0 0 0 .25em var(--color-active);
      outline: none;
    }
  }

  &:after {
    border-color: var(--color-input-border) transparent transparent;
    border-style: solid;
    border-width: .4em;
    content: '';
    display: inline-block;
    margin-top: -.15em;
    pointer-events: none;
    position: absolute;
    right: 1em;
    top: 50%;
  }
}