@mixin editor-layout-pc {
  width: var(--layout-width-pc, auto) !important;
  min-width: var(--layout-width-min-pc, auto) !important;
  max-width: var(--layout-width-max-pc, none) !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  display: block !important;
  margin-top: var(--spacing-margin-top-pc, 0) !important;
  margin-right: var(--spacing-margin-right-pc, 0) !important;
  margin-bottom: var(--spacing-margin-bottom-pc, 0) !important;
  margin-left: var(--spacing-margin-left-pc, 0) !important;
}

@mixin editor-layout-sp {
  width: var(--layout-width-sp, auto);
  min-width: var(--layout-width-min-sp, auto);
  max-width: var(--layout-width-max-sp, none);
  height: auto;
  min-height: auto;
  max-height: none;
  margin-top: var(--spacing-margin-top-sp, var(--spacing-margin-top-pc, 0));
  margin-right: var(--spacing-margin-right-sp, var(--spacing-margin-right-pc, 0));
  margin-bottom: var(--spacing-margin-bottom-sp, var(--spacing-margin-bottom-pc, 0));
  margin-left: var(--spacing-margin-left-sp, var(--spacing-margin-left-pc, 0));
}

@mixin pattern-dots($color, $size) {
  background-image: radial-gradient(circle, $color 1px, transparent 1px);
  background-size: $size $size;
}

@mixin pattern-diagonal-lines($color, $size) {
  background-image: repeating-linear-gradient(45deg, $color 0, $color 1px, transparent 0, transparent 50%);
  background-size: $size $size;
}

@mixin pattern-cross-lines($color, $size) {
  background-image: repeating-linear-gradient(45deg, $color 0, $color 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(-45deg, $color 0, $color 1px, transparent 0, transparent 50%);
  background-size: $size $size;
}

@mixin pattern-horizontal-lines($color, $size) {
  background-image: repeating-linear-gradient(0deg, $color 0, $color 1px, transparent 0, transparent 50%);
  background-size: $size $size;
}

@mixin pattern-vertical-lines($color, $size) {
  background-image: repeating-linear-gradient(90deg, $color 0, $color 1px, transparent 0, transparent 50%);
  background-size: $size $size;
}

@mixin pattern-grid($color, $size) {
  background-image: linear-gradient($color 1px, transparent 1px), linear-gradient(90deg, $color 1px, transparent 1px);
  background-size: $size $size;
}

@mixin pattern-diagonal-grid($color, $size) {
  background-image: repeating-linear-gradient(45deg, $color 0, $color 1px, transparent 0, transparent 50%),
    repeating-linear-gradient(-45deg, $color 0, $color 1px, transparent 0, transparent 50%);
  background-size: $size $size;
}

@mixin pattern-circles($color, $size) {
  background-image: radial-gradient(circle, transparent 40%, $color 40%, $color 50%, transparent 50%);
  background-size: $size $size;
}

@mixin pattern-triangles($color, $size) {
  background-image: conic-gradient(from 210deg at 50% 85%, $color 0deg, $color 120deg, transparent 120deg);
  background-size: $size $size;
}

@mixin background-pattern-styles($bp, $color, $size) {
  &[data-pattern-#{$bp}="dots"] {
    @include pattern-dots($color, $size);
  }
  &[data-pattern-#{$bp}="diagonal-lines"] {
    @include pattern-diagonal-lines($color, $size);
  }
  &[data-pattern-#{$bp}="cross-lines"] {
    @include pattern-cross-lines($color, $size);
  }
  &[data-pattern-#{$bp}="horizontal-lines"] {
    @include pattern-horizontal-lines($color, $size);
  }
  &[data-pattern-#{$bp}="vertical-lines"] {
    @include pattern-vertical-lines($color, $size);
  }
  &[data-pattern-#{$bp}="grid"] {
    @include pattern-grid($color, $size);
  }
  &[data-pattern-#{$bp}="diagonal-grid"] {
    @include pattern-diagonal-grid($color, $size);
  }
  &[data-pattern-#{$bp}="circles"] {
    @include pattern-circles($color, $size);
  }
  &[data-pattern-#{$bp}="triangles"] {
    @include pattern-triangles($color, $size);
  }
}

// Band pattern styles mixin (same patterns as background)
@mixin band-pattern-styles($bp, $color, $size) {
  &[data-pattern-#{$bp}="dots"] {
    @include pattern-dots($color, $size);
  }
  &[data-pattern-#{$bp}="diagonal-lines"] {
    @include pattern-diagonal-lines($color, $size);
  }
  &[data-pattern-#{$bp}="cross-lines"] {
    @include pattern-cross-lines($color, $size);
  }
  &[data-pattern-#{$bp}="horizontal-lines"] {
    @include pattern-horizontal-lines($color, $size);
  }
  &[data-pattern-#{$bp}="vertical-lines"] {
    @include pattern-vertical-lines($color, $size);
  }
  &[data-pattern-#{$bp}="grid"] {
    @include pattern-grid($color, $size);
  }
  &[data-pattern-#{$bp}="diagonal-grid"] {
    @include pattern-diagonal-grid($color, $size);
  }
  &[data-pattern-#{$bp}="circles"] {
    @include pattern-circles($color, $size);
  }
  &[data-pattern-#{$bp}="triangles"] {
    @include pattern-triangles($color, $size);
  }
}