.link {
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

.peach50 {
  color: var(--Primary-Dark-On-Surface-Accent);
}

.red {
  color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
}

.white {
  color: var(--Base-Button-Primary-On-Fill-Normal);

  &:hover,
  &:active {
    color: var(--Base-Button-Primary-On-Fill-Hover);
  }

  &:hover *,
  &:active * {
    fill: var(--Base-Button-Primary-On-Fill-Hover);
  }
}

.Text-Interactive-Default {
  color: var(--Text-Interactive-Default);

  &:hover {
    color: var(--Text-Interactive-Hover);
  }
}

.Text-Interactive-Secondary {
  color: var(--Text-Interactive-Secondary);

  &:hover {
    color: var(--Text-Interactive-Secondary-Hover);
  }
}

.icon {
  align-items: center;
  display: inline-flex;
  gap: var(--Space-x05);
}

.breadcrumb {
  font-family: var(--typography-Footnote-Bold-fontFamily);
  font-size: var(--typography-Footnote-Bold-fontSize);
  font-weight: 500;
  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
  line-height: var(--typography-Footnote-Bold-lineHeight);
}

.link.breadcrumb {
  font-family: var(--typography-Footnote-Bold-fontFamily);
  font-size: var(--typography-Footnote-Bold-fontSize);
  font-weight: 500;
  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
  line-height: var(--typography-Footnote-Bold-lineHeight);
}

.myPageMobileDropdown {
  display: flex;
  align-items: center;
  color: var(--Scandic-Brand-Burgundy);
  font-family: var(--typography-Body-Regular-fontFamily);
  font-size: var(--typography-Body-Regular-fontSize);
  line-height: var(--typography-Body-Regular-lineHeight);
  letter-spacing: var(--typography-Body-Regular-letterSpacing);
  padding: var(--Space-x1);
  border-radius: var(--Corner-radius-md);
  gap: var(--Space-x1);
  justify-content: space-between;

  &:hover {
    background-color: var(--Base-Surface-Primary-light-Hover-alt);
    border-radius: var(--Corner-radius-md);
  }
}

.languageSwitcher {
  color: var(--Text-Interactive-Default);

  &:hover {
    background-color: var(--Surface-Primary-Hover);
    color: var(--Text-Interactive-Default);
  }
}

.shortcut {
  display: grid;
  align-items: center;
  font-family: var(--typography-Body-Regular-fontFamily);
  font-size: var(--typography-Body-Regular-fontSize);
  font-weight: var(--typography-Body-Regular-fontWeight);
  letter-spacing: var(--typography-Body-Regular-letterSpacing);
  line-height: var(--typography-Body-Regular-lineHeight);
  gap: var(--Space-x2);
  grid-template-columns: 1fr auto;
  padding: var(--Space-x2) var(--Space-x3);
  background-color: var(--Base-Surface-Primary-light-Normal);
  transition: background-color 0.3s;

  &:hover {
    background-color: var(--UI-Input-Controls-Surface-Hover);
  }

  &:last-of-type {
    border-bottom: none;
  }
}

.regular {
  font-family: var(--typography-Body-Regular-fontFamily);
  font-size: var(--typography-Body-Regular-fontSize);
  font-weight: 400;
  letter-spacing: var(--typography-Body-Regular-letterSpacing);
  line-height: var(--typography-Body-Regular-lineHeight);
}

.small {
  font-family: var(--typography-Caption-Regular-fontFamily);
  font-size: var(--typography-Caption-Regular-fontSize);
  font-weight: 400;
  letter-spacing: var(--typography-Caption-Regular-letterSpacing);
  line-height: var(--typography-Caption-Regular-lineHeight);
}

.tiny {
  font-family: var(--typography-Footnote-Regular-fontFamily);
  font-size: var(--typography-Footnote-Regular-fontSize);
  font-weight: var(--typography-Footnote-Regular-fontWeight);
  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
  line-height: var(--typography-Footnote-Regular-lineHeight);
}

.bold {
  font-family: var(--typography-Body-Bold-fontFamily);
  font-size: var(--typography-Body-Bold-fontSize);
  font-weight: 500
    /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight) */;
  letter-spacing: var(--typography-Body-Bold-letterSpacing);
  line-height: var(--typography-Body-Bold-lineHeight);
}

.menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--Space-x1);
  gap: var(--Space-x15);
  border-radius: var(--Corner-radius-md);
  color: var(--Text-Interactive-Default);

  &:hover {
    background-color: var(--Surface-Primary-Hover);
    color: var(--Text-Interactive-Default);
  }
}

.navigation {
  padding: var(--Space-x05) var(--Space-x1);
  color: var(--Text-Interactive-Default);

  &:hover {
    color: var(--Text-Interactive-Default);
  }
}