.vuiChip {
  display: inline-flex;
  align-items: center;
  gap: $sizeXs;
  border: 1px solid var(--vui-color-border-light);
  background-color: var(--vui-color-light-shade);
  border-radius: $sizeM;
  transition: all $transitionSpeed;
  box-shadow: $shadowSmallStart;

  &:hover {
    box-shadow: $shadowSmallEnd;
    border-color: var(--vui-color-medium-shade);
  }
}

.vuiChip__label {
  font-weight: $fontWeightStrong;
  color: var(--vui-color-text);
}

.vuiChip__append {
  color: var(--vui-color-subdued-shade);
  font-size: $fontSizeSmall;
  border-radius: $sizeS;
}

.vuiChip--s {
  padding: $sizeXxs $sizeXs;

  .vuiChip__label {
    font-size: $fontSizeSmall;
    // Ensures consistent chip height regardless of whether
    // append is present or not.
    line-height: 1.8;
  }

  .vuiChip__append {
    padding: $sizeXxs $sizeXxs;
  }
}

.vuiChip--m {
  padding: $sizeXxs $sizeS;

  .vuiChip__label {
    font-size: $fontSizeStandard;
    // Ensures consistent chip height regardless of whether
    // append is present or not.
    line-height: 1.6;
  }

  .vuiChip__append {
    padding: $sizeXxs $sizeXs;
  }
}

.vuiChip-isActive {
  border: 1px solid var(--vui-color-primary-shade);
  background-color: var(--vui-color-empty-shade);

  &:hover {
    border: 1px solid var(--vui-color-primary-shade);
  }

  .vuiChip__label,
  .vuiChip__append {
    color: var(--vui-color-primary-shade);
  }
  .vuiChip__append {
    background-color: var(--vui-color-primary-background);
  }
}