@use "@s360-base-theme/ui-core/site-config";
@use "@s360-base-theme/ui-core/content-containers";

.layout {
  container-name: layout;
  container-type: inline-size;

  > .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;
    opacity: var(--layout-region--opacity);
    transition: all 500ms ease-in-out var(--layout-region--transition-delay, 0ms);
    translate: var(--layout-region--translate);

    &--gap-sm {
      row-gap: site-config.$spacer-0;
    }

    &--gap-md {
      row-gap: site-config.$spacer-0;
    }

    &--gap-lg {
      row-gap: site-config.$spacer-0;
    }
  }

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

  &.layout--margin-bottom-sm {
    margin-bottom: site-config.$spacer-0;
  }

  &.layout--margin-bottom-md {
    margin-bottom: site-config.$spacer-0;
  }

  &.layout--margin-bottom-lg {
    margin-bottom: site-config.$spacer-0;
  }

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