@layer components {
  :root {
    --layout__bg-color: var(--color-surface-primary);
    --layout__bg_position: center;
    --layout__bg_repeat: no-repeat;
    --layout__bg_size: cover;
  }

  :root.dark {
    --layout__bg-color: var(--color-surface-primary);
    --layout__bg-image: ;
    --layout__bg-image-opacity: 1;
  }

  .layout--common {
    @apply z-0;
    /* We now declare the host of dialog and overlay in base.css */
    /* See DEV-3003 for details */
    /* @apply relative; */
    @apply flex flex-col flex-1-0-auto;
    @apply items-center justify-start;

    /* padding */
    @apply pt-[var(--safe-area-inset-top)];
    @apply pr-[var(--safe-area-inset-right)];
    @apply pb-[var(--safe-area-inset-bottom)];
    @apply pl-[var(--safe-area-inset-left)];
    @apply tablet:px-16;
    @apply desktop:px-60;
  }

  .layout--common::before {
    content: "";
    @apply -z-10;
    @apply absolute top-0 left-0 right-0 bottom-0;
    @apply pointer-events-none;
  }

  .layout--default {
    @apply layout--common;

    /* In mobile layout, we never see the background color */
    /* Instead, the background-color should be the same as the widget's. */
    /* In non-mobile layout, we see the true background-color */
    @apply bg-[var(--color-surface-primary)] tablet:bg-[var(--layout\_\_bg-color)];
  }

  .layout--default::before {
    /* In mobile layout, we should never see the background image as well */
    /* It should only show background-color that same as widget's background-color */
    /* background-image should only be seen in non-mobile layout */
    @media (min-width: theme("screens.tablet")) {
      background-image: var(--layout__bg-image);
      background-repeat: var(--layout__bg_repeat);
      background-position: var(--layout__bg_position);
      background-size: var(--layout__bg_size);
      opacity: var(--layout__bg-image-opacity);
    }
  }

  .layout--preview {
    @apply layout--common;
    @apply bg-[var(--layout\_\_bg-color)];
  }

  .layout--preview::before {
    /* Always show background image in preview */
    background-image: var(--layout__bg-image);
    background-repeat: var(--layout__bg_repeat);
    background-position: var(--layout__bg_position);
    background-size: var(--layout__bg_size);
    opacity: var(--layout__bg-image-opacity);
  }

  /* alignment-card */
  :root[alignment-card="start"] .layout--default {
    @apply tablet:items-start;
  }
  :root[alignment-card="center"] .layout--default {
    @apply tablet:items-center;
  }
  :root[alignment-card="end"] .layout--default {
    @apply tablet:items-end;
  }

  .layout--default .widget {
    /* In any layout, the widget should NOT grow, and take its initial size. */
    @apply flex-initial;
  }

  .layout__header--default {
    /* In any layout, the layout header takes full widget. */
    @apply w-full;
    /* In mobile layout, the layout header takes 0 height. */
    @apply min-h-0 h-0;
    /* In non-mobile layout, the layout header grows and shrinks with its initial size. */
    /* And the initial size is controlled by min-height and max-height. */
    @apply tablet:flex-auto tablet:min-h-5 tablet:max-h-40;
  }
  .layout__footer--default {
    /* In any layout, the layout header takes full widget. */
    @apply w-full;
    /* In mobile layout, the layout footer takes the remaining height. */
    @apply flex-1;
    /* In non-mobile layout, the layout header grows and shrinks with its initial size. */
    /* And the initial size is controlled by min-height and max-height. */
    /* In non-mobile layout, the layout header grows and shrinks with its initial size. */
    /* And the initial size is controlled by min-height. */
    @apply tablet:flex-auto tablet:min-h-5;
  }

  .layout__settings-header--default {
    /* In any layout, the layout header takes full widget. */
    @apply w-full;
    /* In mobile layout, the layout header takes 0 height. */
    @apply min-h-0 h-0;
    /* In non-mobile layout, the layout header grows and shrinks with its initial size. */
    /* And the initial size is controlled by min-height and max-height. */
    @apply tablet:flex-auto tablet:min-h-8 tablet:max-h-8;
  }
  .layout__settings-footer--default {
    /* In any layout, the layout header takes full widget. */
    @apply w-full;
    /* In mobile layout, the layout footer takes the remaining height. */
    @apply flex-1;
    /* In non-mobile layout, the layout header grows and shrinks with its initial size. */
    /* And the initial size is controlled by min-height and max-height. */
    /* In non-mobile layout, the layout header grows and shrinks with its initial size. */
    /* And the initial size is controlled by min-height. */
    @apply tablet:flex-auto tablet:min-h-8;
  }
}
