div {
  display: flex;
  align-items: center;
  height: 25px;
  gap: var(--typography-spacing-xs);
  padding: var(--scale-250) var(--scale-200);
  border-radius: var(--border-radius-md);

  cursor: pointer;
  color: var(--color-text-body);
  font-family: var(--font-family-body);
  font-size: var(--typography-size-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body-sm);
  letter-spacing: var(--font-letter-spacing-default);

  svg {
    display: flex;
    align-items: center;
    width: 16px;
    height: 16px;
    color: var(--color-icon-primary);
  }

  &:hover:not([disabled]) {
    background-color: var(--color-surface-action-solid-hover-light);
    color: var(--color-text-action-hover);

    svg {
      color: var(--color-icon-action-hover);
    }
  }

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

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

    svg {
      color: var(--color-icon-action-on);
    }

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

    &:hover:not([disabled]) {
      background-color: var(--color-surface-action-solid-hover);
      color: var(--color-text-action-on);

      svg {
        color: var(--color-icon-action-on);
      }
    }
  }

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

    svg {
      color: var(--color-icon-disabled);
    }
  }

  //divider for level-2
  &.level-2 {
    padding: 0px var(--scale-250);
    height: 43px;
    // maybe height 45px, not sure if typo in maquette
  }

  .divider {
    background-color: black;
    width: 1px;
    height: 100%;
    margin: 0px 8px;
  }
}