// ブレークポイントの定義: min-width
$breakpoints: (
  "sm": 0,       // smはメディアクエリなし
  "md": 768px,
  "lg": 992px,
  "xl": 1400px
);
:root {
  --oui-space: 5px;
  --oui-gapSpace: 24px;
  --oui-size: 5%;
  /* container max-width */
  --oui-container-sm: 540px; // 0~767.98px
  --oui-container-md: 960px; // 768px~991.98px
  --oui-container-lg: 1140px; // 992px~1399.98px
  --oui-container-xl: 1320px; // 1400px~
  /* offcanvas width */
  --oui-offcanvas-width-sm: 80%;
  --oui-offcanvas-width-md: 100%;
  --oui-offcanvas-width-lg: 100%;
  --oui-offcanvas-width-xl: 100%;
}

// ------------------------------
// Container
// ------------------------------
@media (min-width: 576px) {
  .container-sm, .container {
    max-width: var(--oui-container-sm);
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: var(--oui-container-md);
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: var(--oui-container-lg);
  }
}
// @media (min-width: 1200px) {
//   .container-xl, .container-lg, .container-md, .container-sm, .container {
//     max-width: var(--oui-container-lg);
//   }
// }
@media (min-width: 1400px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: var(--oui-container-xl);
  }
}

// ------------------------------
// Margin / Padding  +  auto 対応
// ------------------------------
$properties: (
  "m": "margin",
  "p": "padding"
);

$directions: (
  "t": "top",
  "b": "bottom",
  "l": "left",
  "r": "right"
);

$space-values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
$negative-space-values: -1, -2, -3, -4, -5, -6, -7, -8, -9, -10;

// ---------- sm（メディアクエリなし）
@each $prop-abbr, $prop in $properties {
  @each $dir-abbr, $dir in $directions {
    // 数値ユーティリティ
    @each $value in $space-values {
      .#{$prop-abbr}#{$dir-abbr}-#{$value} {
        #{$prop}-#{$dir}: calc(var(--oui-space) * #{$value}) !important;
      }
    }
    // マイナス値ユーティリティ
    @each $value in $negative-space-values {
      .#{$prop-abbr}#{$dir-abbr}-n#{-$value} {
        #{$prop}-#{$dir}: calc(var(--oui-space) * #{$value}) !important;
      }
    }

    // ===== ここから auto ユーティリティ =====
    @if $prop == margin {
      // 個別方向（例: .mt-auto）
      .#{$prop-abbr}#{$dir-abbr}-auto {
        #{$prop}-#{$dir}: auto !important;
      }
    }
  }

  // 全方向（例: .m-auto）
  @if $prop == margin {
    .#{$prop-abbr}-auto {
      #{$prop}: auto !important;
    }
  }
}

// ---------- md / lg などブレークポイント付き
@each $bp-name, $bp-value in $breakpoints {
  @if $bp-name != "sm" {
    @media (min-width: $bp-value) {
      @each $prop-abbr, $prop in $properties {
        @each $dir-abbr, $dir in $directions {
          // 数値ユーティリティ
          @each $value in $space-values {
            .#{$prop-abbr}#{$dir-abbr}-#{$bp-name}-#{$value} {
              #{$prop}-#{$dir}: calc(var(--oui-space) * #{$value}) !important;
            }
          }
          // マイナス値ユーティリティ
          @each $value in $negative-space-values {
            .#{$prop-abbr}#{$dir-abbr}-#{$bp-name}-n#{-$value} {
              #{$prop}-#{$dir}: calc(var(--oui-space) * #{$value}) !important;
            }
          }

          // ===== auto ユーティリティ =====
          @if $prop == margin {
            .#{$prop-abbr}#{$dir-abbr}-#{$bp-name}-auto {
              #{$prop}-#{$dir}: auto !important;
            }
          }
        }

        // 全方向（例: .m-md-auto）
        @if $prop == margin {
          .#{$prop-abbr}-#{$bp-name}-auto {
            #{$prop}: auto !important;
          }
        }
      }
    }
  }
}


// ------------------------------
// gap
// ------------------------------
$gapproperties: (
  "row-gap": "row-gap",
  "column-gap": "column-gap"
);

$gap-values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;

// smブレークポイント（メディアクエリなし）
@each $prop-abbr, $prop in $gapproperties {
  @each $value in $gap-values {
    .#{$prop-abbr}-#{$value} {
      #{$prop}: calc(var(--oui-gapSpace) * #{$value}) !important;
    }
  }
}
// mdとlgブレークポイント（メディアクエリあり）
@each $bp-name, $bp-value in $breakpoints {
  @if $bp-name != "sm" {
    @media (min-width: $bp-value) {
      @each $prop-abbr, $prop in $gapproperties {
        @each $value in $gap-values {
          .#{$prop-abbr}-#{$bp-name}-#{$value} {
            #{$prop}: calc(var(--oui-gapSpace) * #{$value}) !important;
          }
        }
      }
    }
  }
}

// ------------------------------
// Width/Height -> topとかないやつ
// ------------------------------
$properties: (
  "w": "width",
  "h": "height"
);

// サイズの値（今回は1のみ、必要に応じて拡張可能）
$size-values: "auto",1, 2, 3, 4, 5, 6, 7, 8, 9, 10;

// ─── sm（メディアクエリなし）────────────────────────
@each $abbr, $prop in $properties {
  @each $v in $size-values {
    .#{$abbr}-#{$v} {
      @if $v == auto {
        #{$prop}: auto;                             // ← ここだけ特別
      } @else {
        #{$prop}: calc(var(--oui-size) * #{$v});    // 1〜10 は掛け算
      }
    }
  }
}
// ─── md / lg（メディアクエリあり）────────────────
@each $bp-name, $bp-value in $breakpoints {
  @if $bp-name != sm {
    @media (min-width: $bp-value) {
      @each $abbr, $prop in $properties {
        @each $v in $size-values {
          .#{$abbr}-#{$bp-name}-#{$v} {
            @if $v == auto {
              #{$prop}: auto;
            } @else {
              #{$prop}: calc(var(--oui-size) * #{$v});
            }
          }
        }
      }
    }
  }
}

// ------------------------------
// reboot
// ------------------------------
body {
  word-break: break-all;
}
*, ::after, ::before {
  box-sizing: border-box;
}
a:focus {
  outline: 0;
}

// ------------------------------
// image
// ------------------------------
.w-100 {
  width: 100% !important;
  figure {
    width: 100% !important;
  }
  img {
    width: 100% !important;
  }
}
.img-fluid {
  img {
    max-width: 100%;
    height: auto;
  }
}
.wp-block-origamiui-custom-group,
.wp-block-origamiui-custom-container,
.wp-block-origamiui-custom-grid,
.wp-block-origamiui-custom-column,
.wp-block-origamiui-custom-offcanvas,
.wp-block-origamiui-custom-toggle {
  figure, img {
    line-height: 1;
    font-size: 1px;
  }
}

// ------------------------------
// grid
// ------------------------------
.grid {
  display: grid;
  grid-template-columns: repeat(var(--oui-grid-columns-sm, 12), 1fr);

  @media (min-width: 768px) {   // md
    grid-template-columns: repeat(var(--oui-grid-columns-md, 12), 1fr);
  }
  @media (min-width: 992px) {   // lg
    grid-template-columns: repeat(var(--oui-grid-columns-lg, 12), 1fr);
  }
  @media (min-width: 1400px) {   // lg
    grid-template-columns: repeat(var(--oui-grid-columns-xl, 12), 1fr);
  }
}

// offset
$offset-values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;

@each $bp-name, $bp-value in $breakpoints {
  @if $bp-name != "sm" {
    @media (min-width: $bp-value) {
      @each $value in $offset-values {
        .g-offset-#{$bp-name}-#{$value} {
          grid-column-start: $value !important;
        }
      }
    }
  } @else {
    @each $value in $offset-values {
      .g-offset-#{$value} {
        grid-column-start: $value !important;
      }
    }
  }
}