.tao-chip {
  border: $border-width-default solid rgba($color-text-02, $opacity-low-half);
  transition: background-color $transition-sm-slow $transition-easing-default;
  &:focus {
    outline: none;
  }
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    opacity: 0;
    transition: opacity $transition-sm-slow $transition-easing-default;
  }
  &:enabled {
    &:hover {
      &::before {
        opacity: $opacity-low-minimum;
      }
    }
    &:focus, &:active {
      &::before {
        opacity: $opacity-low-half;
      }
    }
  }
  &:disabled {
    background-color: rgba($color-text-03, $opacity-low-half);
    &.tao-chip--selected {
      background-color: rgba($color-brand-button, $opacity-low-half);
    }
  }
  &--selected {
    background-color: rgba($color-brand-button, $opacity-low-half);
    border-color: rgba($color-brand-button, $opacity-low-half);
  }
}