@import 'themes/default';
@import 'themes/bandit';

.Chip {
  background-color: currentColor;
  border-radius: var(--Chip____radius);
  color: inherit;
  display: inline-block;
  padding: var(--Chip____padding);
  position: relative;
  transition-property: background-color, color;
  transition-duration: var(--Chip____transition-duration);

  &--modern {
    display: inline-flex;
    align-items: center;
    @include generate-chip-theme-variables(
      (
        'Chip____radius': var(--radius--small),
        'Chip____padding': 0.25em 0.5em
      )
    );
  }

  &--interactive {
    cursor: pointer;

    &:hover,
    &:focus-visible {
      background-color: var(--Chip____hover-bg-color);
    }

    &:active {
      background-color: var(--Chip____active-bg-color);
    }
  }
}

.Chip__Content {
  color: inherit;
  display: block;
  font-size: var(--Chip____font-size);
  font-weight: var(--Chip____font-weight);
  letter-spacing: var(--Chip____letter-spacing);
  line-height: var(--Chip____line-height);
  text-transform: var(--Chip____text-transform);

  &--modern {
    @include generate-chip-theme-variables(
      (
        'Chip____font-size': var(--font-size--s),
        'Chip____font-weight': var(--font-weight--normal),
        'Chip____text-transform': none,
        'Chip____letter-spacing': normal,
        'Chip____line-height': 1.475
      )
    );
  }

  &--with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.5em;

    > * {
      flex: none;
    }
  }
}

.Chip--outlined {
  background-color: transparent;

  // Chip outline
  &:after {
    border: solid var(--Chip____border-width) currentColor;
    border-radius: var(--Chip____radius);
    bottom: 0;
    content: '';
    left: 0;
    opacity: 0.4;
    position: absolute;
    right: 0;
    top: 0;
  }
}