.dads-hamburger-menu-button {
  display: flex;
  align-items: center;
  column-gap: calc(4 / 16 * 1rem);
  width: fit-content;
  border: 0;
  border-radius: calc(6 / 16 * 1rem);
  background: transparent;
  padding: calc(4 / 16 * 1rem) calc(12 / 16 * 1rem) calc(6 / 16 * 1rem) calc(12 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-800);
  font-weight: normal;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1;
  font-family: var(--font-family-sans);
  letter-spacing: 0.02em;
  touch-action: manipulation;
}

@media (hover: hover) {
  .dads-hamburger-menu-button:hover {
    background-color: var(--color-neutral-solid-gray-50);
    text-decoration: underline;
    text-underline-offset: calc(3 / 16 * 1rem);
  }
}

.dads-hamburger-menu-button:focus-visible {
  outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
  background-color: var(--color-primitive-yellow-300);
  box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-hamburger-menu-button__icon {
  margin-top: calc(2 / 16 * 1rem);
  width: calc(24 / 16 * 1rem);
  height: calc(24 / 16 * 1rem);
  flex-shrink: 0;
  color: var(--color-neutral-black);
}

@media (prefers-color-scheme: dark) {
  .dads-hamburger-menu-button {
    color: var(--color-neutral-white);
  }

  @media (hover: hover) {
    .dads-hamburger-menu-button:hover {
      background-color: var(--color-neutral-solid-gray-900);
      text-decoration: underline;
      text-underline-offset: calc(3 / 16 * 1rem);
    }
  }

  .dads-hamburger-menu-button:focus-visible,
  .dads-hamburger-menu-button:focus-visible * {
    color: var(--color-neutral-black);
  }
}

@media (forced-colors: active) {
  .dads-hamburger-menu-button__icon {
    color: currentcolor;
  }
}