button {
  cursor: pointer;
  background-color: var(--color-surface-primary);
  border: 0;
  border-bottom: var(--border-width-sm) solid var(--color-border-primary);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--typography-spacing-xs);
  width: 100%;
  font-size: var(--typography-size-body-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-body);
  line-height: var(--line-height-body-xs);
  user-select: none;
  padding: var(--scale-200) var(--scale-300);

  * {
    cursor: pointer;
  }

  .icon > *:first-child:not(:empty) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--scale-500);
    height: var(--scale-500);
    color: var(--color-icon-primary);

    i,
    svg {
      width: var(--scale-500);
      height: var(--scale-500);
    }
  }

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

  label:empty,
  label:has(slot:not(:has-slotted)),
  span.icon:has(> slot:not(:has-slotted)),
  slot:not(:has-slotted) {
    display: none;
  }

  &.active {
    background-color: var(--color-surface-action-solid);
    color: var(--color-text-action-on);
    .icon > *:first-child:not(:empty) {
      color: var(--color-icon-action-on);
    }
  }
}