// ----- CONFIG: $UI.Tag

$this = merge({
  heights: {
    s: 2.5u,
    m: 3u,
  },
  paddings: {
    s: 1u,
    m: 1.5u
  },
  fontSizes: {
    s: 'caption',
    m: 'body2'
  },
  iconMargins: {
    inside: {
      s: 0.75u,
      m: 1u
    }
    outside: {
      s: -0.25u,
      m: -0.5u
    }
  }
  outlinedBorderWidth: 1px,
  disabledOpacity: 0.25
},
  $UI.Tag,
  true
)

.root
  flex-direction row
  align-items center
  justify-content center

  for size, height in $this.heights
    &.{size}
      height height

  for size, padding in $this.paddings
    &.{size}
      padding-left padding
      padding-right padding

  &.disabled
    opacity $this.disabledOpacity

  &.outlined
  &.outlined-bg
    border-width: $this.outlinedBorderWidth

.label
  for size, fontSize in $this.fontSizes
    &.{size}
      font(fontSize)

.iconWrapper
  &.left
    for size, margin in $this.iconMargins.inside
      &.{size}
        margin-right margin

    for size, margin in $this.iconMargins.outside
      &.{size}
        margin-left margin

  &.right
    for size, margin in $this.iconMargins.inside
      &.{size}
        margin-left margin

    for size, margin in $this.iconMargins.outside
      &.{size}
        margin-right margin

.icon
  color: $UI.colors.dark

  &.flat
    color: $UI.colors.white

// ----- JS EXPORTS

:export
  colors: $UI.colors