@layer kz-components {
  .item {
    display: block;
    font-family: var(--typography-paragraph-body-font-family);
    font-size: var(--typography-paragraph-body-font-size);
    letter-spacing: var(--typography-paragraph-body-letter-spacing);
    font-weight: var(--typography-paragraph-body-font-weight);
    line-height: var(--typography-paragraph-body-line-height);
    color: var(--color-purple-800);
    padding: var(--spacing-6) var(--spacing-8);
    border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
    border-radius: 4px;
    margin-inline: var(--spacing-6);
    text-decoration: none;
    cursor: pointer;
  }

  .flexWrapper {
    display: flex;
    gap: 0 var(--spacing-8);
    align-items: center;
  }

  .iconWrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .item:focus {
    outline: none;
  }

  .item[data-hovered],
  .item[data-focus-visible] {
    background-color: var(--color-blue-100);
    color: var(--color-blue-500);
  }

  .item[data-focus-visible] {
    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
      var(--color-blue-500);
  }

  .item[data-disabled] {
    opacity: 0.3;
  }
}