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

:local(.wrapper)
  position: relative
  display: block
  color: $textGray
  font-family: $sansserif
  font-size: 16px
  margin-bottom: 10px

:local(.wrapper.primary)
  font-family: $sansserif
  font-size: 16px

:local(.wrapper.truncated)
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

:local(.label)
  display: block
  font-size: 12px
  font-family: $sansserif
  color: $textGray
  //margin-bottom: 2px
  user-select: none
  cursor: inherit

// :local(.label.primary)
//   font-size: 16px
//   //line-height: 10px
//   font-family: $sansserif
//   margin-bottom: -4px

:local(.label.error)
  color: $red

:local(.label.success)
  color: $green

:local(.label.warning)
  color: $yellow

:local(.label.info)
  color: $blue

:local(.label.disabled)
  color: $middleGray


@media only screen and (min-width: 48em)
  :local(.wrapper)
    margin-bottom: 0

  :local(.wrapper.margin)
    margin-bottom: 10px