@import '../bootstrap'
@import '../theme'

chip($material)
  background: $material.chips.background
  color: $material.chips.color

theme(chip, "chip")

.chip
  align-items: center
  border-radius: $chip-border-radius
  border: 1px solid transparent
  display: inline-flex
  font-size: $chip-font-size
  margin: $chip-margin
  outline: none
  position: relative
  transition: $primary-transition
  vertical-align: middle

  .chip__content
    align-items: center
    border-radius: $chip-border-radius
    cursor: default
    display: inline-flex
    height: $chip-height
    justify-content: space-between
    padding: $chip-padding
    vertical-align: middle
    white-space: nowrap
    z-index: 1

  &--removable
    .chip__content
      padding: $chip-removeable-padding

  .avatar
    // Important is needed to account for new avatar structure
    height: $chip-height !important
    margin-left: -12px
    margin-right: 8px
    min-width: $chip-height
    width: $chip-height !important

    img
      height: 100%
      width: 100%

  &:focus,
  &--active,
  &--selected
    &:not(.chip--disabled)
      border-color: rgba(#000, .13)
      overflow: hidden
      elevation(2)

      &:after
        background: currentColor
        border-radius: inherit
        content: ''
        height: 100%
        position: absolute
        top: 0
        left: 0
        transition: inherit
        width: 100%
        pointer-events: none
        opacity: .13

  &--label
    border-radius: $chip-label-border-radius

    .chip__content
      border-radius: $chip-label-border-radius

  // Increase specificity to override theme background
  &\&.chip--outline
    background: $chip-outline-background
    border-color: currentColor
    color: $chip-outline-color

  &--small
    height: $chip-small-height

    .avatar
      height: $chip-small-height
      min-width: $chip-small-height
      width: $chip-small-height
      
    .icon
      font-size: $chip-small-font-size

  &__close
    align-items: center
    color: inherit
    cursor: pointer
    display: flex
    font-size: $chip-icon-font-size
    margin: $chip-close-margin
    text-decoration: none
    user-select: none
    
    > .icon
      color: inherit !important
      font-size: 20px
      opacity: .5

      &:hover
        opacity: 1

  &--select-multi
    margin: $chip-margin $chip-margin $chip-margin 0

  .icon
    color: inherit

    &--right
      margin-left: $chip-icon-offset
      margin-right: $chip-icon-negative-offset

    &--left
      margin-left: $chip-icon-negative-offset
      margin-right: $chip-icon-offset