:host {
  display: inline-block;
}

label {
  width: fit-content;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-letter-spacing-default);

  color: var(--color-text-body);
  background-color: var(--color-surface-primary);
  border: var(--border-width-sm) solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  gap: var(--scale-100);

  i,
  svg {
    width: var(--typography-size-body-md); // no icon size at 16px available
    height: var(--typography-size-body-md);
    display: flex;
  }

  //counter block
  .count {
    border: var(--border-width-sm) solid var(--color-border-primary);
    border-radius: var(--border-radius-md);
    padding: var(--scale-25) var(--scale-100);
    background-color: var(--color-surface-primary);
    text-align: center;
  }

  // active / selected
  &[active] {
    background-color: var(--color-surface-action-solid);
    color: var(--color-text-action-on);

    .count {
      color: var(--color-text-body);
    }

    &:hover {
      background-color: var(--color-surface-action-solid-hover);

      .count {
        color: var(--color-text-action);
        border-color: var(--color-icon-action);
      }
    }

    &[disabled] {
      background-color: var(--color-surface-disabled-selected);

      .count {
        color: var(--color-text-disabled-on);
        border-color: var(--color-icon-disabled);
      }
    }
  }

  //states
  &:hover {
    background-color: var(--color-surface-action-solid-hover-light);
    border-color: var(--color-icon-action-hover);
  }

  &:focus-visible {
    outline: var(--border-width-sm) solid var(--color-border-focus);
    outline-offset: 3px;
  }

  &[disabled] {
    cursor: not-allowed;
    background-color: var(--color-surface-disabled);
    border-color: var(--color-surface-disabled-selected);
    color: var(--color-text-disabled-on);

    .count {
      border-color: var(--color-icon-disabled);
      background-color: var(--color-surface-disabled);
    }

    svg {
      display: none;
    }
  }

  //sizes
  &.xs {
    height: 22px;
    font-size: var(--typography-size-body-xs);
    line-height: var(--line-height-body-xs);
    padding: var(--scale-100) var(--scale-150);
  }

  &.sm {
    height: 24px;
    font-size: var(--typography-size-body-sm);
    line-height: var(--line-height-body-sm);
    padding: var(--scale-100) var(--scale-150);
  }

  &.md {
    height: 26px;
    font-size: var(--typography-size-body-md);
    line-height: var(--line-height-body-md);
    padding: var(--scale-150) var(--scale-300);
  }
}