

.pf-c-chip {
  @extend %pf-t-light; // force the container follow the light theme

  --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100);
  --pf-c-chip--BorderColor: var(--pf-global--secondary-color--100);
  --pf-c-chip--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm);

  // modified chip
  --pf-c-chip--m-overflow--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
  --pf-c-chip--m-overflow--PaddingLeft: 0;
  --pf-c-chip--m-overflow--BorderColor: transparent;
  --pf-c-chip--m-overflow--BorderWidth: 0;
  --pf-c-chip--m-overflow--hover--BorderColor: var(--pf-global--secondary-color--100);
  --pf-c-chip--m-overflow--hover--BorderWidth: var(--pf-global--BorderWidth--sm);

  // modified chip button
  --pf-c-chip--m-overflow--button--BorderRadius: var(--pf-global--BorderRadius--sm);
  --pf-c-chip--m-overflow--button--BorderWidth: 0;
  --pf-c-chip--m-overflow--button--BorderColor: transparent;
  --pf-c-chip--m-overflow--button--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-chip--m-overflow--button--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-chip--m-overflow--button--active--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-chip--m-overflow--button--active--BorderColor: var(--pf-global--secondary-color--100);
  --pf-c-chip--m-overflow--button--focus--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-chip--m-overflow--button--focus--BorderColor: var(--pf-global--secondary-color--100);

  // chip text
  --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
  --pf-c-chip__text--Color: var(--pf-global--Color--100);
  --pf-c-chip__text--MaxWidth: #{pf-size-prem(120px)};

  // chip button
  --pf-c-chip__button--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-chip__button--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-chip__button--FontSize: var(--pf-global--FontSize--xs);

  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: var(--pf-c-chip--PaddingLeft);
  color: var(--pf-c-chip--Color);
  background-color: var(--pf-c-chip--BackgroundColor);
  border-radius: var(--pf-c-chip--BorderRadius);

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    border: var(--pf-c-chip--BorderWidth) solid var(--pf-c-chip--BorderColor);
    border-radius: var(--pf-c-chip--BorderRadius);
  }

  // Chip Overflow Modifier
  &.pf-m-overflow {
    --pf-c-chip--PaddingLeft: var(--pf-c-chip--m-overflow--PaddingLeft);
    --pf-c-chip--BackgroundColor: var(--pf-c-chip--m-overflow--BackgroundColor);

    // Remove Chip border
    &::before {
      content: "";

      --pf-c-chip--BorderColor: var(--pf-c-chip--m-overflow--BorderColor);
      --pf-c-chip--BorderWidth: var(--pf-c-chip--m-overflow--BorderWidth);
    }

    &.pf-m-hover,
    &:hover {
      &::before {
        --pf-c-chip--BorderColor: var(--pf-c-chip--m-overflow--hover--BorderColor);
        --pf-c-chip--BorderWidth: var(--pf-c-chip--m-overflow--hover--BorderWidth);
      }
    }

    .pf-c-button {
      padding-right: var(--pf-c-chip--m-overflow--button--PaddingRight);
      padding-left: var(--pf-c-chip--m-overflow--button--PaddingLeft);
      border: var(--pf-c-chip--m-overflow--button--BorderWidth) solid var(--pf-c-chip--m-overflow--button--BorderColor);

      &.pf-m-active,
      &:active {
        /* stylelint-disable-next-line */
        &::after {
          border: var(--pf-c-chip--m-overflow--button--active--BorderWidth) solid var(--pf-c-chip--m-overflow--button--active--BorderColor);
          border-radius: var(--pf-c-chip--m-overflow--button--BorderRadius);
        }
      }

      &.pf-m-focus,
      &:focus {
        /* stylelint-disable-next-line */
        &::after {
          border: var(--pf-c-chip--m-overflow--button--focus--BorderWidth) solid var(--pf-c-chip--m-overflow--button--focus--BorderColor);
          border-radius: var(--pf-c-chip--m-overflow--button--BorderRadius);
        }
      }
    }
  }

  // Button
  .pf-c-button {
    padding-right: var(--pf-c-chip__button--PaddingRight);
    padding-left: var(--pf-c-chip__button--PaddingLeft);
    font-size: var(--pf-c-chip__button--FontSize);
  }
}

// Text Element
.pf-c-chip__text {
  max-width: var(--pf-c-chip__text--MaxWidth);
  overflow: hidden;
  font-size: var(--pf-c-chip__text--FontSize);
  color: var(--pf-c-chip__text--Color);
  text-overflow: ellipsis;
  white-space: nowrap;
}
