@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/opacities';
@import '@vtmn/css-design-tokens/src/shadows';
@import '@vtmn/css-design-tokens/src/spacings';
@import '@vtmn/css-design-tokens/src/transitions';

.vtmn-list {
  display: block;
  font-family: var(--vtmn-typo_font-family);
  font-weight: var(--vtmn-typo_font-weight--normal);
  font-size: var(--vtmn-typo_text-2-font-size);
  color: var(--vtmn-semantic-color_content-primary);
  background-color: var(--vtmn-semantic-color_background-primary);
  inline-size: 100%;
  outline: 0;
  padding: 0;
}

.vtmn-list a.vtmn-list__link {
  display: flex;
  inline-size: 100%;
  text-decoration: inherit;
  color: inherit;
}

.vtmn-list li > a.vtmn-list__link[aria-disabled='true'] {
  color: currentcolor;
  pointer-events: none;
  text-decoration: none;
}

.vtmn-list li {
  block-size: fit-content;
  min-block-size: fit-content;
  display: flex;
  inline-size: 100%;
  outline: 0;
  cursor: pointer;
  transition: var(--vtmn-transition_focus-visible);
}

.vtmn-list li:not([aria-disabled='true']):hover {
  background-color: var(--vtmn-semantic-color_hover-primary);
}

.vtmn-list li:not([aria-disabled='true']):active {
  background-color: var(--vtmn-semantic-color_active-primary);
}

.vtmn-list li:not([aria-disabled='true']):focus-visible {
  box-shadow: var(--vtmn-shadow_focus-visible);
}

.vtmn-list li[aria-disabled='true'] {
  opacity: var(--vtmn-opacity_disabled-state);
  cursor: not-allowed;
}

.vtmn-list li[aria-disabled='true'] *:disabled {
  opacity: 1;
}

.vtmn-list_start-visual {
  inline-size: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--vtmn-spacing_3);
  padding-inline: 0;
  margin-inline-start: rem(20px);
}

.vtmn-list_start-visual + .vtmn-list_text {
  margin-inline-start: var(--vtmn-spacing_3);
  padding-inline-start: 0;
}

.vtmn-list_start-visual span[class^='vtmx-'] {
  font-size: var(--vtmn-typo_title-5-font-size);
}

.vtmn-list_text {
  inline-size: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  border-block-end: rem(1px) solid var(--vtmn-semantic-color_border-primary);
  padding-block: var(--vtmn-spacing_3);
  padding-inline: rem(20px);
  line-height: var(--vtmn-typo_text-2-line-height);
}

.vtmn-list_text > span:nth-child(2) {
  color: var(--vtmn-semantic-color_content-tertiary);
}

.vtmn-list_end-action {
  inline-size: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  border-block-end: rem(1px) solid var(--vtmn-semantic-color_border-primary);
  padding-block: var(--vtmn-spacing_3);
  padding-inline: var(--vtmn-spacing_4);
}

.vtmn-list_item--without-divider .vtmn-list_end-action,
.vtmn-list_item--without-divider .vtmn-list_text {
  border-block-end: 0;
}

.vtmn-list_end-action > .vtmn-btn--icon-alone {
  min-block-size: rem(36px);
  min-inline-size: rem(36px);
  block-size: rem(36px);
  inline-size: rem(36px);
  border-radius: 50%;
  color: var(--vtmn-semantic-color_content-primary);
}

.vtmn-list_end-action > .vtmn-btn--icon-alone > span[class^='vtmx-'] {
  font-size: var(--vtmn-typo_title-5-font-size);
}

.vtmn-list_media--circle {
  min-inline-size: rem(40px);
  inline-size: rem(40px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.vtmn-list_media--square {
  min-inline-size: rem(56px);
  inline-size: rem(56px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.vtmn-list_media--rectangle {
  min-inline-size: rem(112px);
  inline-size: rem(112px);
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* SIZES */

/* Small */
.vtmn-list .vtmn-list_item-size--small {
  font-size: var(--vtmn-typo_text-3-font-size);
}

.vtmn-list .vtmn-list_item-size--small .vtmn-list_text {
  line-height: var(--vtmn-typo_text-3-line-height);
}

.vtmn-list_item-size--small .vtmn-list_start-visual span[class^='vtmx-'],
.vtmn-list_item-size--small
  .vtmn-list_end-action
  .vtmn-btn--icon-alone
  > span[class^='vtmx-'] {
  font-size: var(--vtmn-typo_text-2-font-size);
}

.vtmn-list_item-size--small .vtmn-list_end-action > .vtmn-btn--icon-alone {
  min-block-size: rem(24px);
  min-inline-size: rem(24px);
  block-size: rem(24px);
  inline-size: rem(24px);
}

/* Medium */
.vtmn-list .vtmn-list_item-size--medium {
  font-size: var(--vtmn-typo_text-2-font-size);
}

.vtmn-list .vtmn-list_item-size--medium .vtmn-list_text {
  line-height: var(--vtmn-typo_text-2-line-height);
}

.vtmn-list_item-size--medium .vtmn-list_start-visual span[class^='vtmx-'],
.vtmn-list_item-size--medium
  .vtmn-list_end-action
  .vtmn-btn--icon-alone
  > span[class^='vtmx-'] {
  font-size: var(--vtmn-typo_title-5-font-size);
}

.vtmn-list_item-size--medium .vtmn-list_end-action > .vtmn-btn--icon-alone {
  min-block-size: rem(36px);
  min-inline-size: rem(36px);
  block-size: rem(36px);
  inline-size: rem(36px);
}
