.link {
}

.noDecoration {
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

.default {
  font-family: var(--typography-Body-Regular-fontFamily);
}

.breadcrumb {
  font-family: var(--typography-Footnote-Bold-fontFamily);
  font-size: var(--typography-Footnote-Bold-fontSize);
  font-weight: 500;
  /* var(--typography-Footnote-Bold-fontWeight); */
  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;
  /* var(--typography-Footnote-Bold-fontWeight); */
  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
  line-height: var(--typography-Footnote-Bold-lineHeight);
}

.icon {
  align-items: center;
  display: flex;
  gap: var(--Spacing-x-half);
}

.underscored {
  font-family: var(--typography-Body-Underline-fontFamily);
  font-size: var(--typography-Body-Underline-fontSize);
  font-weight: var(--typography-Body-Underline-fontWeight);
  letter-spacing: var(--typography-Body-Underline-letterSpacing);
  line-height: var(--typography-Body-Underline-lineHeight);
  text-decoration: underline;
}

.myPageMobileDropdown {
  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(--Spacing-x1);
  border-radius: var(--Corner-radius-md);
  display: flex;
  gap: var(--Spacing-x1);
  justify-content: space-between;
  align-items: center;
}

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

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

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

.shortcut:last-of-type {
  border-bottom: none;
}

.sidebar {
  align-items: center;
  border-radius: var(--Corner-radius-md);
  display: flex;
  gap: var(--Spacing-x1);
  padding: var(--Spacing-x1);
}

.activeSidebar {
  background-color: var(--Scandic-Peach-20);
}

.tab {
  font-family: var(--typography-Body-Regular-fontFamily);
  padding: var(--Spacing-x2) var(--Spacing-x0);
  color: var(--Base-Text-High-contrast);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.3s ease-in-out;
}

.tab:hover {
  border-bottom: 2px solid var(--Scandic-Brand-Burgundy);
}

.tab.burgundy:hover {
  color: var(--Base-Text-High-contrast);
}

.tab.active {
  border-bottom: 2px solid var(--Scandic-Brand-Burgundy);
  font-weight: 600;
}

.baseButtonTextOnFillNormal {
  color: var(--Base-Button-Text-On-Fill-Normal);
}

.black {
  color: #000;
}

.uiTextPlaceholder {
  color: var(--Base-Text-Placeholder);
}

.uiTextPlaceholder:hover,
.uiTextPlaceholder:active {
  color: var(--Base-Text-Medium-contrast);
}

.burgundy {
  color: var(--Base-Text-High-contrast);
}

.burgundy:hover,
.burgundy:active {
  color: var(--Base-Button-Text-On-Fill-Hover);
}

.burgundy:hover *,
.burgundy:active * {
  fill: var(--Base-Button-Text-On-Fill-Hover);
}

.pale {
  color: var(--Scandic-Brand-Pale-Peach);
}

.peach50 {
  color: var(--Scandic-Peach-50);
}

.peach80,
.baseTextMediumContrast {
  color: var(--Base-Text-Medium-contrast);
}

.peach80:hover,
.peach80:active,
.baseTextMediumContrast:hover,
.baseTextMediumContrast:active {
  color: var(--Base-Text-High-contrast);
}

.peach80 *,
.baseTextMediumContrast * {
  fill: var(--Base-Text-Medium-contrast);
}

.peach80:hover *,
.peach80:active *,
.baseTextMediumContrast:hover *,
.baseTextMediumContrast:active * {
  fill: var(--Base-Text-High-contrast);
}

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

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

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

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

.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);
}

.activeRegular {
  font-family: var(--typography-Body-Bold-fontFamily);
  font-size: var(--typography-Body-Bold-fontSize);
  font-weight: 500;
  letter-spacing: var(--typography-Body-Bold-letterSpacing);
  line-height: var(--typography-Body-Bold-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);
}

.activeSmall {
  font-family: var(--typography-Caption-Bold-fontFamily);
  font-size: var(--typography-Caption-Bold-fontSize);
  font-weight: 500;
  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
  line-height: var(--typography-Caption-Bold-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;
  text-decoration: none;
  width: 100%;
  padding: var(--Spacing-x1);
  gap: var(--Spacing-x-one-and-half);
  color: var(--Base-Text-High-contrast);
  border-radius: var(--Corner-radius-md);
}

.menu:hover {
  color: var(--Base-Text-High-contrast);
  background-color: var(--Base-Surface-Primary-light-Hover-alt);
}

.navigation {
  color: var(--Base-Text-High-contrast);
  text-decoration: none;
  padding: var(--Spacing-x-half) var(--Spacing-x1);
}