@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/animators";

.layout {
  container-name: layout;
  container-type: inline-size;
  margin-bottom: var(--layout--bottom-space);

  &:not(.layout--one-column) {
    > .layout__content > .layout__regions {
      display: grid;
      row-gap: site-config.spacer(0);
      column-gap: site-config.$column-gap;
    }
  }

  .layout__region {
    container-name: layout-region;
    container-type: inline-size;
    display: flex;
    flex-direction: column;

    &--gap-sm {
      row-gap: site-config.spacer(2);
    }

    &--gap-md {
      row-gap: site-config.spacer(4);
    }

    &--gap-lg {
      row-gap: site-config.spacer(6);
    }
  }

  // **************************************************
  // DIVIDERS

  &.layout--divider-bottom {
    border-bottom: 1px solid var(--highlight-color);
    padding-bottom: var(--layout--bottom-space);
  }

  // **************************************************
  // BOTTOM MARGINS

  &.layout--margin-bottom-sm {
    --layout--bottom-space: #{ site-config.spacer(2) };
  }

  &.layout--margin-bottom-md {
    --layout--bottom-space: #{ site-config.spacer(4) };
  }

  &.layout--margin-bottom-lg {
    --layout--bottom-space: #{ site-config.spacer(6) };
  }

  &:last-child {
    margin-bottom: 0;
  }

  // **************************************************
  // ANIMATORS

  // Apply slideup animator to all region items except inside two-column,
  &:not(.layout--two-column) {
    .layout__region-item {
      @extend %fadein-slideup-animator;
    }
  }
}
