// <select name="x" required>
//   <option disabled selected hidden>Placeholder</option> // placeholder workaround
//   <option value="1">Option #1</option>
// </select>

select
  color: #000
  background: #fff url("/res/common/downward_arrow.svg") 97% 55%/10px no-repeat
  border: 1px solid #d3d3d3
  border-radius: 2px
  outline: none
  box-shadow: none
  padding: 6px 8px
  margin: 0
  box-sizing: border-box
  position: relative
  cursor: pointer
  -webkit-appearance: none
  -moz-appearance: none
  appearance: none

  &:active
    outline: none

  & > option
    color: #000
    outline: none

    &[hidden]
      display: none

  &::placeholder,
  &:invalid
    color: #aaa
    opacity: 1

  &:focus
    border: 2px solid #fc0
    outline: none
    padding: 5px 7px

  &.full-width
    width: 100%
