/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
:host {
  --link-default-color: var(--joy-color-secondary-30);
  --link-default-color-hover: var(--joy-color-secondary-50);
  --link-default-color-visited: var(--joy-color-secondary-90);
  --link-border-color-focus: var(--joy-color-neutral-60);
  padding: 0 2px;
  color: var(--link-default-color);
  font-weight: var(--joy-font-weight-normal);
  font-size: var(--joy-font-size-primary-600);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
}

::slotted(joy-icon) {
  margin-right: var(--joy-core-spacing-2);
}

.joy-link {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  padding: inherit;
  border: 2px solid transparent;
  background-color: transparent;
  border-radius: var(--joy-core-radius-2);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
}
.joy-link:hover {
  text-decoration: underline;
}
.joy-link:hover, .joy-link:hover span {
  color: var(--link-default-color-hover);
  text-decoration: underline;
}
.joy-link:focus-visible {
  border: 2px solid var(--link-border-color-focus);
  border-radius: 4px;
  text-decoration: none;
}
.joy-link:focus-visible span {
  text-decoration: none;
}
.joy-link:active, .joy-link:visited, .joy-link:visited span {
  color: var(--link-default-visited);
}
.joy-link joy-icon {
  margin: 0 var(--joy-core-spacing-2);
}
.joy-link joy-icon svg {
  color: inherit;
}
.joy-link_teal {
  color: var(--link-default-color);
}
.joy-link_teal:hover {
  color: var(--link-default-color-hover);
}
.joy-link_teal:active, .joy-link_teal:visited {
  color: var(--link-default-color-visited);
}
.joy-link_white, .joy-link_white:hover, .joy-link_white:active {
  color: white !important;
}
.joy-link_white:active {
  opacity: 0.7;
}