// ===
// 後續開發請停止使用這裡的mixin，待移除
// ===
$gap: 32px !default;
$desktop: 960px + (2 * $gap) !default;
$tablet: 768px !default;
$mobile: 375px !default;

@mixin mobile {
  @media screen and (max-width: $tablet - 1px) {
    @content;
  }
}
@mixin tablet {
  @media screen and (min-width: $tablet - 1px), print {
    @content;
  }
}
@mixin tablet-only {
  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
    @content;
  }
}
@mixin touch {
  @media screen and (max-width: $desktop - 1px) {
    @content;
  }
}
@mixin desktop {
  @media screen and (min-width: $desktop) {
    @content;
  }
}

// ===
// Grid
// ===
$grid-breakpoint-map: (
  xs: 0,
  ssm: 322px,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1920px,
);

@mixin max-2sm {
  @media screen and (max-width: map-get($grid-breakpoint-map, 'ssm') - 1px) {
    @content;
  }
}

@mixin max-sm {
  @media screen and (max-width: map-get($grid-breakpoint-map, 'sm') - 1px) {
    @content;
  }
}

@mixin max-md {
  @media screen and (max-width: map-get($grid-breakpoint-map, 'md') - 1px) {
    @content;
  }
}

@mixin max-lg {
  @media screen and (max-width: map-get($grid-breakpoint-map, 'lg') - 1px) {
    @content;
  }
}

@mixin max-xl {
  @media screen and (max-width: map-get($grid-breakpoint-map, 'xl') - 1px) {
    @content;
  }
}

@mixin max-2xl {
  @media screen and (max-width: map-get($grid-breakpoint-map, 'xxl') - 1px) {
    @content;
  }
}

@mixin min-2sm {
  @media screen and (min-width: map-get($grid-breakpoint-map, 'ssm')) {
    @content;
  }
}

@mixin min-sm {
  @media screen and (min-width: map-get($grid-breakpoint-map, 'sm')) {
    @content;
  }
}

@mixin min-md {
  @media screen and (min-width: map-get($grid-breakpoint-map, 'md')) {
    @content;
  }
}

@mixin min-lg {
  @media screen and (min-width: map-get($grid-breakpoint-map, 'lg')) {
    @content;
  }
}

@mixin min-xl {
  @media screen and (min-width: map-get($grid-breakpoint-map, 'xl')) {
    @content;
  }
}

@mixin min-2xl {
  @media screen and (min-width: map-get($grid-breakpoint-map, 'xxl')) {
    @content;
  }
}

// ===
// Gutter
// ===
.row {
  @for $i from 0 through 21 {
    &.gutter-#{$i} {
      margin-left: -#{$i}px;
      margin-right: -#{$i}px;
      & > [class*=col]{
        padding-left: #{$i}px;
        padding-right: #{$i}px;
      }
    }
  }
}

.gutter- {}

// ===
// Special Col
// ===
$special-col-map: (104, 160, 280);

@each $value in $special-col-map {
  .col-#{$value}px {
    flex-basis: 0;
    flex-grow: 1;
    max-width: #{$value}px;
  }
}

// ===
// Container
// ===
$section-padding: 7rem;

$container-gap: 20px;
$container: 1460px + ($container-gap * 2);
$container-map: (
  "smaller": 960px + ($container-gap * 2),
  "small": 1210px + ($container-gap * 2),
  "medium": 1700px + ($container-gap * 2),
  "big": 1920px + ($container-gap * 2),
  "form": 460px + ($container-gap * 2),
);

.container {
  width: $container;
  max-width: 100vw;
  @media screen and (max-width: $container) {
    // max-width: calc(100vw - #{$container-gap * 2});
  }
  @each $container, $value in $container-map {
    &--#{$container} {
      margin: 0 auto;
      width: $value;
      max-width: 100vw;
      padding: 0 $container-gap;
      @media screen and (max-width: $container) {
        // max-width: calc(100vw - #{$container-gap * 2});
      }
    }
  }
}