/* 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 の sticky: true で付与）。shrink-0 でフッターは潰れない。
 * 列レイアウトはページにより異なる:
 *  - ドキュメントスクロール（new/edit など、shell は min-h-screen）: コンテンツ部 flex-1 が短時はフッターを
 *    最下部へ押し出し、長時は sticky bottom:0 でスクロール中も画面下部へ貼り付く。
 *  - 内側スクロール（confirm など、shell は h-screen + overflow-hidden）: 列が viewport 高に収まり、
 *    フッターは列の最下部に固定される。
 * 幅は包含ブロック（コンテンツ列）に追従するため、列が右ドロワー等と並んだときは一緒に縮む。
 * 背景は .ui-footer の bg-white がスクロール中の背面コンテンツを隠す。
 */
.ui-footer--sticky {
  @apply sticky bottom-0 z-10 shrink-0;
}