@use "@naomi-2025/ui-core/site-config";
@use "@naomi-2025/ui-core/border-radius";
@use "@naomi-2025/ui-core/content-containers";
@use "@naomi-2025/ui-core/mq";
@use "s360-scss-toolkit";

.layout--one-column {
  &[data-color-scheme] {
    &[class*="edge-to-edge"],
    &[class*="normal"] {
      background-color: var(--bg-color);
      padding-block: site-config.spacer(5);
    }

    &[class*="normal"] {
      padding-inline: site-config.$column-gap;
    }

    &[class*="inset-"] {
      > .layout__content {
        background-color: var(--bg-color);
        padding-block: site-config.spacer(5);
        padding-inline: site-config.$column-gap;
      }
    }

    [data-site-mode="at-play"] & {
      &.layout--border-radius-tl {
        border-radius: border-radius.top-left();
      }

      &.layout--border-radius-tr {
        border-radius: border-radius.top-right();
      }

      &.layout--border-radius-bl {
        border-radius: border-radius.bottom-left();
      }

      &.layout--border-radius-br {
        border-radius: border-radius.bottom-right();
      }

      &.layout--border-radius-tlbr {
        border-radius: border-radius.top-left--bottom-right();
      }

      &.layout--border-radius-trbl {
        border-radius: border-radius.top-right--bottom-left();
      }

      &[class*="layout--accent"] {
        position: relative;

        &::after {
          content: '';
          background-color: var(--layout--accent--bg-color);
          position: absolute;
          inset: 0;
          z-index: -1;
        }
      }

      &.layout--accent-1-bg-color {
        --layout--accent--bg-color: var(--accent-bg-color-1);
      }
      &.layout--accent-2-bg-color {
        --layout--accent--bg-color: var(--accent-bg-color-2);
      }
      &.layout--accent-3-bg-color {
        --layout--accent--bg-color: var(--accent-bg-color-3);
      }
      &.layout--accent-4-bg-color {
        --layout--accent--bg-color: var(--accent-bg-color-4);
      }
    }
  }

  &.layout--edge-to-edge {
    @include content-containers.bleed;

    > .layout__content {
      @include content-containers.safe-area-content;
    }
  }

  &.layout--edge-to-edge-safe {
    @include content-containers.bleed-safe-area;

    &[data-color-scheme] {
      > .layout__content {
        @include content-containers.bleed-safe-area-content;
      }
    }
  }

  // **************************************************
  // MEDIA QUERIES

  @media (width > mq.$mq-768) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: site-config.$column-gap;

    &[data-color-scheme] {
      &[class*="normal"] {
        margin-inline: calc(#{ site-config.$column-gap } * -1);
      }

      &[class*="inset-"] {
        > .layout__content {
          margin-inline: calc(#{ site-config.$column-gap } * -1);
        }
      }
    }

    > .layout__content {
      grid-column: var(--layout--content--grid-column, 1 / -1);
    }

    &.layout--indent-1 {
      --layout--content--grid-column: 2 / -2;
    }

    &.layout--indent-2 {
      --layout--content--grid-column: 3 / -3;
    }

    &.layout--outdent-1 {
      margin-inline: calc(
        calc(-50vw + 50%) - (var(--scrollbar-width, 0px) / 2 * -1)
        + #{ site-config.column-width(0) }
        + var(--safe-area-inline)
      );
    }

    &.layout--outdent-2 {
      margin-inline: calc(
        calc(-50vw + 50%) - (var(--scrollbar-width, 0px) / 2 * -1)
        + #{ site-config.column-width(1) }
        + var(--safe-area-inline)
      );
    }
  }

  @media (width > mq.$mq-1024) {
    &.layout--outdent-1 {
      margin-inline: calc(
        calc(-50vw + 50%) - (var(--scrollbar-width, 0px) / 2 * -1)
        + #{ site-config.column-width(1) }
        + var(--safe-area-inline)
      );
    }

    &.layout--outdent-2 {
      margin-inline: calc(
        calc(-50vw + 50%) - (var(--scrollbar-width, 0px) / 2 * -1)
        + #{ site-config.column-width(0) }
        + var(--safe-area-inline)
      );
    }
  }
}
