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

.myPageMobileDropdown {
  display: flex;
  align-items: center;
  color: var(--Scandic-Brand-Burgundy);
  font-family:
    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
  font-size: var(--Body-Paragraph-Size);
  line-height: 1.5;
  letter-spacing: var(--Body-Paragraph-Letter-spacing);
  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(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
  font-size: var(--Body-Paragraph-Size);
  font-weight: var(--Body-Paragraph-Font-weight);
  letter-spacing: var(--Body-Paragraph-Letter-spacing);
  line-height: 1.5;
  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;
  }
}

.large {
  font-family: var(--Link-md-Font-family);
  font-size: var(--Link-md-Size);
  font-weight: var(--Link-md-Font-weight);
  letter-spacing: var(--Link-md-Letter-spacing);
  line-height: 150%;
}

.small {
  font-family: var(--Link-sm-Font-family);
  font-size: var(--Link-sm-Size);
  font-weight: var(--Link-sm-Font-weight);
  letter-spacing: var(--Link-sm-Letter-spacing);
  line-height: 140%;
}

.bold {
  font-family:
    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
  font-size: var(--Body-Paragraph-Size);
  font-weight: var(--Body-Paragraph-Font-weight-2);
  letter-spacing: var(--Body-Paragraph-Letter-spacing);
  line-height: 1.5;
}

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