/* Footer - Figma Footer 仕様準拠 */
.ui-footer {
  @apply flex min-h-18 items-center justify-end border-t border-gray-200 bg-white px-6 py-3;
}

.ui-footer__sub-action {
  @apply mr-auto;
}

.ui-footer__actions {
  @apply flex min-h-px min-w-px flex-1 items-center justify-end gap-2;
}

.ui-footer__sub-button {
  @apply w-40;
}

.ui-footer__primary-button {
  @apply w-80;
}

/*
 * 左のサブボタンが表示され、かつ右の主要ボタンが 1 つだけのときに FooterHelper が付与する。
 */
.ui-footer--left-right-single {
  @apply justify-between px-12;
}

/*
 * 画面下部に固定する（FooterHelper の fixed: true で付与）。
 *
 * sticky ではなく fixed にしているのは、コンテンツ側（.tenant-main）が下限を持ち、狭い画面では
 * ドキュメントごと横スクロールするため。列に追従する sticky だとフッターも下限まで広がり、横スクロールで
 * 右のボタンごと流れて押せなくなる。viewport 基準にすれば、画面幅に収まったまま留まる。
 *
 * 右端はテナントレイアウトの --tenant-fixed-inset-right に合わせる。右ドロワーと並ぶページでは
 * ドロワーの左端で止まり、ヘッダと同じ幅になる。既定値（0px）は tenant/layouts/application.css の
 * :root が宣言し、ドロワーを出すページの shell だけが差し替える（CSS は全ページ 1 バンドル）。
 * 背景は .ui-footer の bg-white がスクロール中の背面コンテンツを隠す。
 */
.ui-footer--fixed {
  @apply fixed bottom-0 left-0 z-10;
  right: var(--tenant-fixed-inset-right);
}

/*
 * fixed のフッターはフローから外れるので、コンテンツの末尾が隠れる。同じ高さのスペーサーを
 * フッターの直前に置いて押し下げる（高さは .ui-footer の min-h-18 に合わせる）。
 */
.ui-footer__spacer {
  @apply h-18 shrink-0;
}