// Select elements



.select {  
  $svg-size: .7rem;
  appearance: none;      // reset standard
  -moz-appearance: none; // reset firefox
  cursor: pointer;
  text-overflow: ellipsis;

  border-radius: var(--border-radius-m);

  padding-right: 1.2rem !important; // Space to make room for icon
  background-image: url('#{$svg-carret}'); // See SVG helpers
  background-size: $svg-size $svg-size;
  background-repeat: no-repeat;
  background-position: right .9rem top calc(50%);
  position: relative;
  //background-color: var(--color-main-2);
  //color: var(--color-prime-3);

  &:hover {
    //background-color: var(--color-prime-1);
  }

  option { 
    padding: 0;
    margin: 0;
    color: var(--color-main-5);
    background-color: var(--color-accent-3);
  }
  option[selected] {
    color: var(--color-accent-3);
  }

  &:disabled { 
    background-size: 100% 100%;    // reset
    background-position: left top; // reset
  }

  optgroup        { color: var(--colored-5, var(--color-main-5)) }
  option:disabled { color: var(--color-main-3) } // wishful thinking
  &:-ms-expand { display: none } // IE reset
}
