@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/shadows';
@import '@vtmn/css-design-tokens/src/spacings';
@import '@vtmn/css-design-tokens/src/transitions';

.vtmn-tabs {
  block-size: fit-content;
  inline-size: 100%;
  background-color: var(--vtmn-semantic-color_background-primary);
  display: block;
  white-space: nowrap;
  overflow-x: auto;
  margin: 0;
  padding: 0;
}

.vtmn-tabs > li {
  display: inline-flex;
  padding-inline: rem(2px);
  padding-block-start: rem(2px);
}

.vtmn-tabs > li > button {
  cursor: pointer;
  background-color: transparent;
  background-image: none;
  appearance: button;
  padding: 0;
  box-sizing: border-box;
  border-width: 0;
  display: inline-flex;
  align-items: center;
  font-family: var(--vtmn-typo_font-family);
  font-size: var(--vtmn-typo_text-2-font-size);
  padding-inline: rem(20px);
  padding-block-start: var(--vtmn-spacing_3);
  padding-block-end: rem(10px);
  white-space: nowrap;
  color: var(--vtmn-semantic-color_content-secondary);
  border-block-end: rem(2px) solid transparent;
  transition: border-block-end 200ms ease, color 200ms ease,
    var(--vtmn-transition_focus-visible);
  outline: none;
  text-decoration: none;
}

.vtmn-tabs > li > button:hover {
  color: var(--vtmn-semantic-color_hover-brand);
}

.vtmn-tabs > li > button:active {
  color: var(--vtmn-semantic-color_active-brand);
}

.vtmn-tabs > li > button:focus-visible {
  border-block-end: rem(2px) solid var(--vtmn-semantic-color_content-primary);
  box-shadow: 0 0 0 rem(2px) var(--vtmn-semantic-color_content-primary);
}

.vtmn-tabs > li > button[aria-selected='true'] {
  color: var(--vtmn-semantic-color_content-active);
  border-block-end: rem(2px) solid var(--vtmn-semantic-color_content-active);
}

.vtmn-tabs > li > button[aria-selected='true']:focus-visible {
  border-block-end: rem(2px) solid var(--vtmn-semantic-color_content-primary);
}

.vtmn-tabs-item--selected > .vtmn-badge {
  background-color: var(--vtmn-semantic-color_background-brand-primary);
  color: var(--vtmn-semantic-color_content-primary-reversed);
  box-shadow: none;
}

.vtmn-tabs .vtmn-badge {
  margin-inline-start: var(--vtmn-spacing_2);
}

.vtmn-tabs span[class^='vtmx-'],
.vtmn-tabs_size--medium span[class^='vtmx-'] {
  font-size: var(--vtmn-typo_title-5-font-size);
  margin-inline-end: var(--vtmn-spacing_2);
  color: inherit;
}

/* ALIGN */

/* Start (default) */
.vtmn-tabs_align--start {
  text-align: start;
}

/* Center */
.vtmn-tabs_align--center {
  text-align: center;
}

/* End */
.vtmn-tabs_align--end {
  text-align: end;
}

/* SIZES */

/* Medium (default) */
.vtmn-tabs_size--medium > li > button {
  font-size: var(--vtmn-typo_text-2-font-size);
  padding-inline: rem(20px);
  padding-block-start: var(--vtmn-spacing_3);
  padding-block-end: rem(10px);
}

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

/* Small */
.vtmn-tabs_size--small > li > button {
  font-size: var(--vtmn-typo_text-3-font-size);
  padding-inline: var(--vtmn-spacing_4);
  padding-block-start: var(--vtmn-spacing_2);
  padding-block-end: rem(6px);
}

.vtmn-tabs_size--small span[class^='vtmx-'] {
  font-size: var(--vtmn-typo_text-2-font-size);
}
