:root {
  --overlay-background-color: var(--color-midnight);
  --overlay-color: var(--color-white);
  --overlay-close-color: var(--color-orange);
  --overlay-close-hover-color: var(--color-midnight);
  --overlay-backdrop-opacity: 0.58;
  --overlay-max-width: 75rem;
  --overlay-slim-max-width: 50rem;
  --overlay-animation: slide-from-right;
  --overlay-block-spacing: 2rem;

  @include use-responsive-sizing(--overlay-bar-height, responsive-map(xs 6rem, xl 9rem));
  @include use-responsive-sizing(--overlay-footer-height, responsive-map(xs 6rem, xl 9rem));
  @include use-responsive-sizing(--overlay-content-padding-inline, responsive-map(xs 3rem, xl 6rem));
  @include use-responsive-sizing(--overlay-content-padding-block, responsive-map(xs 3rem, xl 6rem));
  @include use-responsive-sizing(--overlay-slim-content-padding-inline, responsive-map(xs 2rem, xl 4rem));
  @include use-responsive-sizing(--overlay-centered-content-padding-inline, responsive-map(xs 2rem, xl 3rem));
  @include use-responsive-sizing(--overlay-block-spacing-media, responsive-map(xs 3.6rem, xl 5.6rem));
}

.overlay {
  animation: opacity var(--duration-default);
  inset: 0;
  position: fixed;
  z-index: z-index('overlay');

  &:is([hidden]) {
    display: none;
  }
}

.overlay--slim {
  --overlay-max-width: var(--overlay-slim-max-width);
  --overlay-content-padding-inline: var(--overlay-slim-content-padding-inline);
}

.overlay--centered {
  --overlay-inset: 50% 50% auto;
  --overlay-translate: -50% -50%;
  --overlay-content-padding-inline: var(--overlay-centered-content-padding-inline);
}

.overlay__backdrop {
  background-color: var(--overlay-background-color);
  inset: 0;
  opacity: var(--overlay-backdrop-opacity);
  position: absolute;
  z-index: 1;
}

.overlay__overlay {
  animation: opacity var(--duration-default), var(--overlay-animation) var(--duration-long);
  background-color: var(--overlay-background-color);
  color: var(--overlay-color);
  inline-size: var(--overlay-width, 100%);
  inset: var(--overlay-inset, 0 0 0 auto);
  max-inline-size: var(--overlay-max-width);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: absolute;
  translate: var(--overlay-translate, none);
  z-index: 2;
}

.overlay__bar {
  --overlay-bar-height-unit: calc(var(--overlay-bar-height) / 6);

  align-items: center;
  backdrop-filter: blur(10px);
  block-size: var(--overlay-bar-height);
  display: flex;
  inline-size: 100%;
  inset: 0 0 auto auto;
  justify-content: flex-end;
  max-inline-size: var(--overlay-max-width);
  padding-inline: calc(var(--overlay-content-padding-inline) - var(--overlay-bar-height-unit));
  position: fixed;
  z-index: 2;
}

.overlay__close {
  align-items: center;
  block-size: calc(var(--overlay-bar-height-unit) * 4);
  color: var(--overlay-close-color);
  cursor: pointer;
  display: flex;
  font-size: calc(var(--overlay-bar-height-unit) * 2);
  inline-size: calc(var(--overlay-bar-height-unit) * 4);
  justify-content: center;
  line-height: 1;
  text-align: start;
  transition-property: background-color, color, opacity;
  user-select: none;

  &:is(:hover:not([disabled]), :focus:not(.has-invisible-focus)) {
    background-color: var(--overlay-close-color);
    color: var(--overlay-close-hover-color);
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

.overlay__content {
  --overlay-inner-padding-block: 2rem;
  --social-media-links-text-align: left;
  --social-media-links-links-align: flex-start;

  display: flex;
  flex-direction: column;
  min-block-size: 100%;
  padding-block: var(--overlay-bar-height) var(--overlay-footer-height);
  padding-inline: var(--overlay-content-padding-inline);

  .overlay:not(.overlay--with-footer) & {
    --overlay-footer-height: var(--overlay-content-padding-block);
  }
}

.overlay__blocks {
  line-height: var(--line-height-body);
  margin-block-start: 4rem;
}

.overlay__block {
  margin-block-end: var(--overlay-block-spacing);

  .overlay__blocks:first-child &:first-child,
  .overlay__blocks:first-child &:first-child > *:first-child {
    margin-block-start: 0;
  }

  .overlay__blocks:last-child &:last-child {
    margin-block-end: 0;
  }

  > * + * {
    margin-block-start: var(--overlay-block-spacing);
  }

  > .headline {
    margin-block-start: calc(var(--overlay-block-spacing) * 2);
  }
}

.overlay__block--media {
  margin-block: var(--overlay-block-spacing-media);
}

.overlay__footer {
  --icon-button-background-color: transparent;
  --icon-button-background-color-active: transparent;
  --icon-button-border-color: transparent;
  --icon-button-border-color-active: transparent;
  --icon-button-icon-color: var(--color-orange);
  --icon-button-icon-color-active: var(--color-orange);
  --icon-button-size: 2.6rem;
  --icon-button-icon-size: 2.6rem;
  --icon-button-gap: 0.6rem;
  --icon-button-underline-height: 1px;
  --icon-button-text-size: 1.6rem;

  align-items: center;
  background-color: var(--overlay-background-color);
  block-size: var(--overlay-footer-height);
  display: flex;
  gap: 4rem;
  inline-size: 100%;
  inset: auto 0 0 auto;
  max-inline-size: var(--overlay-max-width);
  padding-inline: var(--overlay-content-padding-inline);
  position: fixed;
  z-index: 2;

  > :not(:first-child)::before {
    background-color: var(--color-midnight-offset);
    content: '';
    inline-size: 0.2rem;
    inset-block: 20%;
    margin-inline-start: -1.9rem;
    position: absolute;
  }
}