@import '../utilities/colors'

$chip-background-color: $gray__300
$chip-color: $black-alpha-87
$chip-color-hover: $black
$chip-font-size: 15px
$chip-border-radius: 16px
$chip-icon-color: $black-alpha-60
$chip-color-activated: $primary

.material-chip-set
  box-sizing: border-box
  padding: 4px
  display: flex
  flex-wrap: wrap

  & .material-chip
    margin: 4px

.material-chip
  -webkit-font-smoothing: antialiased
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  user-select: none
  display: inline-flex
  align-items: center
  box-sizing: border-box
  cursor: pointer
  overflow: hidden
  position: relative
  will-change: transform,opacity
  background: $chip-background-color
  border-radius: $chip-border-radius
  color: $chip-color
  font-size: $chip-font-size
  line-height: 20px
  font-weight: 400
  height: 32px
  padding: 7px 12px
  transition: all 0.25s ease

  &::before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: $black
    opacity: 0
    transition: opacity 0.25s ease

  &:hover
    color: $chip-color-hover

    &::before
      opacity: 0.04

  &:focus
    outline: 0
    color: $chip-color-hover

    &::before
      opacity: 0.08

  &:active::before
    opacity: 0.16

.material-chip--shaped
  border-radius: 4px

.material-chip--activated
  color: $chip-color-activated
  background-color: #fff

  &::before
    opacity: 0.12
    background-color: $chip-color-activated

  &:hover
    color: $chip-color-activated
    
    &::before
      opacity: 0.16

  &:focus
    color: $chip-color-activated
    
    &::before
      opacity: 0.20

  &:active::before
    opacity: 0.28

  & .material-chip__icon
    color: $chip-color-activated

.material-chip__icon
  width: 20px
  height: 20px
  font-size: 20px
  margin: -4px 4px -4px -4px
  color: $chip-icon-color

.material-chip__text
  white-space: nowrap