/*
 * @file
 * Styles for the Layout dynamic component.
 */

.layout-dynamic {
  --layout-dynamic-padding-inline: 0px;

  container-type: inline-size;
  padding-inline: var(--layout-dynamic-padding-inline);
  color: var(--theme-text-color-medium);

  &[class*="theme"] {
    background: var(--theme-surface);

    &.container {
      --layout-dynamic-padding-inline: var(--spacing-xs);

      @container (width > 600px) {
        --layout-dynamic-padding-inline: var(--spacing-m);
      }
    }
  }

  &:has(.has-background-image) {
    padding: 0;
  }
}

.layout-dynamic__container {
  .layout-dynamic--section-edge-to-edge.layout-dynamic--content-edge-to-edge & {
    padding-inline: var(--sp2);

    @container (width > 700px) {
      padding-inline: var(--sp4);
    }
  }
}

.layout-dynamic__layout {
  display: grid;
  grid-template-columns: minmax(0, auto);
  gap: 20px;

  @container (width <= 800px) {
    &.layout-dynamic__layout--columns-2 {
      /* At narrow widths, ensure that the widest cell appears first. */
      &:is(.layout-dynamic__layout--25-75, .layout-dynamic__layout--33-67) {
        .layout-dynamic__cell:nth-child(2) {
          order: -1;
        }
      }
    }
  }

  @container (width > 800px) {
    gap: 40px 20px;

    &.layout-dynamic__layout--columns-2 {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

      &.layout-dynamic__layout--25-75 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
      }

      &.layout-dynamic__layout--33-67 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      }

      &.layout-dynamic__layout--75-25 {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
      }

      &.layout-dynamic__layout--67-33 {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      }
    }

    &.layout-dynamic__layout--columns-3 {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);

      &.layout-dynamic__layout--50-25-25 {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
      }

      &.layout-dynamic__layout--25-50-25 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
      }

      &.layout-dynamic__layout--25-25-50 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
      }
    }

    &.layout-dynamic__layout--columns-4 {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

      @container (width > 1000px) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
      }
    }
  }
}

.layout-dynamic__cell {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  grid-column: auto;
}

.layout-dynamic__cell--align-x-start {
  align-items: start;
}

.layout-dynamic__cell--align-x-center {
  align-items: center;
}

.layout-dynamic__cell--align-x-end {
  align-items: end;
}

.layout-dynamic__cell--align-y-top {
  justify-content: start;
}

.layout-dynamic__cell--align-y-center {
  justify-content: center;
}

.layout-dynamic__cell--align-y-bottom {
  justify-content: end;
}