@import "../css/colors"
@import "../css/vars"

:local(.wrapper)
  position: relative
  display: flex
  flex-direction: column


:local(.select)
  position: relative
  display: block
  font-family: $sansserif
  font-size: 16px
  color: $textGray
  border: none
  width: 100%
  box-sizing: border-box
  padding: 3px 0 3px 10px
  min-height: 40px
  background-color: $white
  -webkit-appearance: none
  -moz-appearance: none
  border-radius: 0
  border: solid 1px $borderGray
  transition: background-color .1s, padding .1s

  &:focus
    box-shadow: none
    // border-bottom: solid 1px $blue
    outline: none

  &:disabled
    color: $middleGray

:local(.wrapper.error > .select)
  border: solid 1px $red

:local(.wrapper.readonly > .select)
  // padding: 2px 0 4px 0
  // background-color: transparent
  border: solid 1px $lightGray
  cursor: pointer

  &:hover
    border: solid 1px $borderGray
    // text-decoration: underline;

// label offset in card
:local(.wrapper.labelOffset)
  &:before
    left: -4px

:local(.wrapper.labelOffset > .select)
  transition: background-color .1s
  // Ensure the text doesn't jump when the field appears
  // And that the field aligns nicely to the right.
  //margin-left: -4px
  //width: calc(100% + 4px)
  padding-right: 4px

:local(.wrapper.readonly.labelOffset > .select)
  margin-left: 0

:local(.icon)
  position: absolute
  font-size: 22px
  bottom: 10px
  right: 5px
  content: $doka-icon-dropdown
  font-family: "doka_Iconfont"
  color: $darkGray
  pointer-events: none

:local(.select:disabled~.icon)
  color: $middleGray

:local(.wrapper.readonly > .icon)
  display: none