:root {
  --nav_shortcut_bg: #3d3d3c;
  --nav_shortcut_color: #ffffff;
  --nav_shortcut_hover_bg: color-mix(in srgb, #ffffff 8%, transparent);
  --nav_shortcut_line: color-mix(in srgb, #ffffff 12%, transparent);
  --nav_shortcut_primary_bg: var(--primary_color);
  --nav_shortcut_primary_color: var(--primary_contrast_color);
  --nav_shortcut_shadow: none;
}

.nav_shortcut_contact {
  container-type: inline-size;
  z-index: var(--z_overall);
  position: fixed;
  inset-inline-end: var(--control_gap);
  bottom: var(--control_gap);
  display: flex;
  align-items: stretch;
  background-color: var(--nav_shortcut_bg);
  box-shadow: var(--nav_shortcut_shadow);
}
@media (max-width: 579px) {
  .nav_shortcut_contact {
    inset-inline: 0;
    bottom: 0;
  }
}

.nav_shortcut_trigger {
  order: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  color: var(--nav_shortcut_color);
  cursor: pointer;
  transition-property: color, border, background, background-image, background-color;
  transition-duration: var(--transition_time_s);
  transition-timing-function: linear;
}
.nav_shortcut_trigger:hover, .nav_shortcut_trigger:focus-visible {
  background-color: var(--nav_shortcut_hover_bg);
}
.nav_shortcut_trigger .open {
  display: block;
}
.nav_shortcut_trigger .close {
  display: none;
}
.nav_shortcut_trigger.open .open {
  display: none;
}
.nav_shortcut_trigger.open .close {
  display: block;
}
.nav_shortcut_trigger .open::after,
.nav_shortcut_trigger .open::before,
.nav_shortcut_trigger .close::after,
.nav_shortcut_trigger .close::before {
  background-color: var(--nav_shortcut_color);
}
.nav_shortcut_trigger img,
.nav_shortcut_trigger svg,
.nav_shortcut_trigger .icon {
  width: 1.2rem;
  height: 1.2rem;
  max-width: 1.2rem;
  max-height: 1.2rem;
  transition: transform var(--transition_time_m);
}

.nav_shortcut_link {
  order: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.25rem;
  min-width: 5.75rem;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--nav_shortcut_color);
  text-decoration: none;
  text-align: center;
  transition: max-width var(--transition_time_m) var(--ease_standard), padding var(--transition_time_m) var(--ease_standard), opacity var(--transition_time_s) var(--ease_standard), background-color var(--transition_time_s) var(--ease_standard);
}
@media (max-width: 579px) {
  .nav_shortcut_link {
    flex: 1;
    min-width: 0;
  }
}
.nav_shortcut_link svg,
.nav_shortcut_link img {
  width: 1.35rem;
  height: 1.35rem;
  transition: transform var(--transition_time_m) var(--ease_standard);
}
.nav_shortcut_link .label {
  font-size: var(--text_xsmall);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  white-space: nowrap;
}
.nav_shortcut_link:hover, .nav_shortcut_link:focus-visible {
  background-color: var(--nav_shortcut_hover_bg);
}
.nav_shortcut_link:hover svg,
.nav_shortcut_link:hover img, .nav_shortcut_link:focus-visible svg,
.nav_shortcut_link:focus-visible img {
  transform: translateY(-2px);
}
.nav_shortcut_link.primary {
  background-color: var(--nav_shortcut_primary_bg);
  color: var(--nav_shortcut_primary_color);
}
.nav_shortcut_link.primary:hover, .nav_shortcut_link.primary:focus-visible {
  background-color: var(--primary_color_dark);
  color: #ffffff;
}

.nav_shortcut_trigger.open ~ .nav_shortcut_link {
  max-width: 12rem;
  padding: 0.7rem 1.1rem;
  opacity: 1;
  border-inline-end: 1px solid var(--nav_shortcut_line);
}

.nav_shortcut_pulse {
  animation-name: nav_shortcut_pulse;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.nav_shortcut_pulse.open {
  animation: none;
}

@keyframes nav_shortcut_pulse {
  0% {
    box-shadow: 0 0 0px 0px color-mix(in srgb, var(--primary_color) 45%, transparent);
  }
  100% {
    box-shadow: 0 0 0px 16px transparent;
  }
}