.List {
  --list-item-bg-color: transparent;
  --list-pipka-border-radius: 0 var(--border-radius-xs) var(--border-radius-xs) 0;
  display: flex;
  flex-direction: column;
  gap: var(--list-gap);
  padding: var(--list-gutter) 0;
  margin: 0;
  position: relative;
  outline: none;
  background-color: var(--list-bg-color);
}

  .List_color_main {
    --list-bg-color: var(--color-background-main);
    --list-item-color: var(--color-content-primary);
    --list-item-secondary-color: var(--color-content-secondary);
    --list-item-disabled-color: var(--color-content-tertiary);
    --list-pipka-bg-color: var(--color-content-action);
    --list-item-bg-color-disabled: var(--color-content-tertiary);
    --list-item-bg-color-hover: var(--color-background-main-hover);
    --list-item-bg-color-active: var(--color-background-main-pressed);
    --list-item-bg-color-selected: transparent;
    --list-divider-color: var(--color-border-secondary);
  }

  .List_color_accent {
    --list-bg-color: var(--color-accent-main);
    --list-item-color: var(--color-content-accent-primary);
    --list-item-secondary-color: var(--color-content-accent-secondary);
    --list-item-disabled-color: var(--color-content-accent-disabled);
    --list-pipka-bg-color: var(--color-content-accent-primary);
    --list-item-bg-color-disabled: var(--color-content-accent-disabled);
    --list-item-bg-color-hover: var(--color-accent-primary-hover);
    --list-item-bg-color-active: var(--color-accent-primary-pressed);
    --list-item-bg-color-selected: var(--color-accent-primary);
    --list-divider-color: var(--color-accent-primary);
  }

  .List_size_2xs,
    .List_size_xs,
    .List_size_s {
      --list-gap: 2px;
    }

  .List_size_m,
    .List_size_l {
      --list-gap: 4px;
    }

  .List_size_2xs {
      --list-gutter: var(--spacing-3xs);
      --list-item-min-height: var(--control-height-2xs);
      --list-item-icon-min-width: 16px;
      --list-item-avatar-min-width: 16px;
      --list-item-padding: 0 8px;
      --list-item-children-margin-right: 8px;
      --list-pipka-height: 32px;
      --list-pipka-width: 4px;
      --list-item-border-radius: var(--border-radius-m);
    }

  .List_size_xs {
      --list-gutter: var(--spacing-3xs);
      --list-item-min-height: var(--control-height-xs);
      --list-item-icon-min-width: 16px;
      --list-item-avatar-min-width: 24px;
      --list-item-padding: 4px 8px;
      --list-item-children-margin-right: 8px;
      --list-pipka-height: 32px;
      --list-pipka-width: 2px;
      --list-item-border-radius: var(--border-radius-m);
    }

  .List_size_s {
      --list-gutter: var(--spacing-3xs);
      --list-item-min-height: var(--control-height-s);
      --list-item-icon-min-width: 16px;
      --list-item-avatar-min-width: 32px;
      --list-item-padding: 6px 12px;
      --list-item-children-margin-right: 12px;
      --list-pipka-height: 32px;
      --list-pipka-width: 2px;
      --list-item-border-radius: var(--border-radius-l);
    }

  .List_size_m {
      --list-gutter: var(--spacing-2xs);
      --list-item-min-height: var(--control-height-m);
      --list-item-icon-min-width: 24px;
      --list-item-avatar-min-width: 40px;
      --list-item-padding: 8px 12px;
      --list-item-children-margin-right: 12px;
      --list-pipka-height: 48px;
      --list-pipka-width: 4px;
      --list-item-border-radius: var(--border-radius-l);
    }

  .List_size_l {
      --list-gutter: var(--spacing-2xs);
      --list-item-min-height: var(--control-height-l);
      --list-item-icon-min-width: 24px;
      --list-item-avatar-min-width: 48px;
      --list-item-padding: 8px 16px;
      --list-item-children-margin-right: 16px;
      --list-pipka-height: 48px;
      --list-pipka-width: 4px;
      --list-item-border-radius: var(--border-radius-l);
    }

  .List_disablePadding,
  .List:empty {
    --list-gutter: 0;
  }

  .List .Divider {
    --divider-color: var(--list-divider-color);
  }