:root {
  --header-background-color: transparent;
  --header-height: var(--header-inner-height);

  @include use-responsive-sizing(--header-inner-height, responsive-map(xs 7.5rem, l 11rem));
  @include use-responsive-sizing(--header-logo, responsive-map(xs 13rem, l 22.5rem));
  @include use-responsive-sizing(--header-button-text, responsive-map(xs 1rem, l 1.4rem));
  @include use-responsive-sizing(--header-button-icon-size, responsive-map(xs 1.6rem, l 3.2rem));
  @include use-responsive-sizing(--header-button-image-size, responsive-map(xs 2rem, l 3.4rem));
  @include use-responsive-sizing(--header-button-symbol-size, responsive-map(xs 3.2rem, l 6rem));
  @include use-responsive-sizing(--header-navigation-gap, responsive-map(s 1rem, l 2rem));
}

.header {
  background-color: var(--header-background-color);
}

.header__inner {
  align-items: center;
  block-size: var(--header-inner-height);
  display: flex;
  justify-content: space-between;

  @include use-container();
}

.header__logo {
  display: block;
  max-inline-size: var(--header-logo);
}

.header__navigation {
  display: flex;
  gap: var(--header-navigation-gap);
  margin-block-start: calc((var(--header-button-symbol-size) - var(--header-button-icon-size)) * -0.5);
}

.header__button {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-inline-size: 4.4rem;
  user-select: none;
}

.header__button-symbol {
  align-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--color-midnight);
  display: flex;
  inline-size: var(--header-button-symbol-size);
  justify-content: center;
  line-height: 0;
  overflow: hidden;
  transition-property: background-color, color;

  .header__button:is(:hover:not([disabled]), :focus-visible:not(.has-invisible-focus)) & {
    background-color: var(--color-midnight);
    color: var(--color-white);
  }
}

.header__button-icon {
  font-size: var(--header-button-icon-size);
}

.header__button-image {
  aspect-ratio: 1;
  border-radius: 50%;
  inline-size: var(--header-button-image-size);
  object-fit: cover;
  overflow: hidden;
}

.header__button-text {
  font-size: var(--header-button-text);
  line-height: 1;
  white-space: nowrap;
}