@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/transitions';

.vtmn-link {
  font-family: var(--vtmn-typo_font-family);
  font-weight: var(--vtmn-typo_font-weight--bold);
  color: var(--vtmn-semantic-color_content-action);
  font-size: var(--vtmn-typo_text-2-font-size);
  text-decoration: underline;
  transition: var(--vtmn-transition_focus-visible);
}

.vtmn-link--standalone {
  text-decoration: none;
}

.vtmn-link:hover,
.vtmn-link--standalone:hover {
  color: var(--vtmn-semantic-color_hover-brand);
  text-decoration: underline;
}

.vtmn-link:active,
.vtmn-link--standalone:active {
  color: var(--vtmn-semantic-color_active-brand);
  text-decoration: underline;
}

.vtmn-link:visited,
.vtmn-link--standalone:visited {
  color: var(--vtmn-semantic-color_content-visited);
  text-decoration: none;
}

.vtmn-link:focus-visible {
  outline: none;
  box-shadow: var(--vtmn-shadow_focus-visible);
}

.vtmn-link--icon-along::after {
  content: '';
  mask: url("data:image/svg+xml;charset=utf-8, <svg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M14 7.333V2H8.667v1.333h3.056L6.53 8.53l.942.942 5.196-5.196v3.058H14zm-7.333-2V4h-4A.667.667 0 0 0 2 4.667v8.666c0 .368.298.667.667.667h8.666a.667.667 0 0 0 .667-.667v-4h-1.333v3.334H3.333V5.333h3.334z' /></svg>");
  mask-size: cover;
  inline-size: rem(14px);
  block-size: rem(14px);
  position: relative;
  display: inline-block;
  inset-inline-start: rem(5px);
  margin-inline-end: rem(6px);
  background-color: var(--vtmn-semantic-color_content-action);
}

.vtmn-link--icon-along:hover::after {
  background-color: var(--vtmn-semantic-color_hover-brand);
}

.vtmn-link--icon-along:active::after {
  background-color: var(--vtmn-semantic-color_active-brand);
}

.vtmn-link--icon-along:visited::after {
  background-color: var(--vtmn-semantic-color_content-visited);
}

.vtmn-link_size--small {
  font-size: var(--vtmn-typo_text-3-font-size);
}

.vtmn-link_size--medium {
  font-size: var(--vtmn-typo_text-2-font-size);
}

.vtmn-link_size--large {
  font-size: var(--vtmn-typo_text-1-font-size);
}

/* Reversed */

.vtmn-link--reversed {
  color: var(--vtmn-semantic-color_content-action-reversed);
}

.vtmn-link--reversed:hover {
  color: var(--vtmn-base-color_grey50);
}

.vtmn-link--reversed:active {
  color: var(--vtmn-base-color_grey100);
}

.vtmn-link--reversed:visited {
  color: var(--vtmn-semantic-color_content-visited-reversed);
}

.vtmn-link--reversed::after {
  background-color: var(--vtmn-semantic-color_content-action-reversed);
}

.vtmn-link--reversed:hover::after {
  background-color: var(--vtmn-base-color_grey50);
}

.vtmn-link--reversed:active::after {
  background-color: var(--vtmn-base-color_grey100);
}

.vtmn-link--reversed:visited::after {
  background-color: var(--vtmn-semantic-color_content-visited-reversed);
}

.vtmn-link--reversed:focus-visible {
  outline: none;
  box-shadow: 0 0 0 rem(4px) var(--vtmn-semantic-color_border-primary-reversed),
    0 0 0 rem(6px) var(--vtmn-semantic-color_border-secondary);
}
