/* ログアウト導線のハンバーガーメニューボタン(Figma: hamburger-menu/close) */
.guest-hamburger-menu {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  padding: 0;
  /* Figmaでは border-width が0なので枠線は描かれない(色だけ指定されている) */
  border: none;
  /* 左下のみ角丸 */
  border-bottom-left-radius: 16px;
  /* gradation/pale-orange。角度はノードごとに差があり、ここは143度 */
  background: linear-gradient(143deg, var(--color-neutral-0) 7.1429%, var(--color-orange-25) 92.857%);
  /* Figmaのeffect style "header": offset(0,0) / radius 16 / #FFAF514D */
  box-shadow: 0 0 16px rgba(255, 175, 81, 0.3);
  cursor: pointer;
}

/* menu_drawer.js が開状態で hidden を付けるが、ヘッダー高さを保つため display:none にはしない */
.guest-hamburger-menu[hidden] {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}

/* 三本線。Figmaでは24x20のsvg(stroke 2px / 丸い端点 / y=1,10,19)だが、
 * 単純な線なのでCSSで再現している。
 * space-betweenで (20 - 2*3) / 2 = 7px ずつ空くので、svgの位置と一致する。
 * 丸い端点は border-radius(線幅の半分=1px)で再現。 */
.guest-hamburger-menu__icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 20px;
}

.guest-hamburger-menu__bar {
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: var(--guest-color-button-default);
}