@use "core/site-config";

/// BLEED
/// These mixins and placeholders are designed to force the content to span the
/// entire viewport, infinitely.
///
/// @mixin should only be used inside "@media" queries.
/// %placeholders should cannot be used inside "@media" queries.

@mixin bleed-left {
  margin-left: calc(calc(-50vw + 50%) - (var(--scrollbar-width, 0px) / 2 * -1));
}

/// @requires {mixin} bleed-left
%content-container-bleed-left {
  @include bleed-left;
}

@mixin bleed-right {
  margin-right: calc(calc(-50vw + 50%) - (var(--scrollbar-width, 0px) / 2 * -1));
}

/// @requires {mixin} bleed-right
%content-container-bleed-right {
  @include bleed-right;
}

/// @requires {mixin} bleed-left
/// @requires {mixin} bleed-right
@mixin bleed {
  @include bleed-left;
  @include bleed-right;
}

/// Same as the bleed mixin, but cannot be use inside `@media` queries.
/// @requires {mixin} bleed
%content-container-bleed {
  @include bleed;
}

/// TRIM
/// These mixins and placeholders are designed to force content into
/// "safe-area" of the site. (i.e. side margins).
///
/// @mixin should only be used inside "@media" queries.
/// %placeholders should cannot be used inside "@media" queries.

@mixin trim-left {
  margin-left: calc(var(--safe-area-left) * -1);
}

/// @requires {mixin} trim-left
%trim-left {
  @include trim-left;
}

@mixin trim-right {
  margin-right: calc(var(--safe-area-right) * -1);
}

/// @requires {mixin} trim-right
%content-container-trim-right {
  @include trim-right;
}

/// @requires {mixin} trim-left
/// @requires {mixin} trim-right
@mixin trim {
  @include trim-left;
  @include trim-right;
}

/// @requires {mixin} trim
%content-container-trim {
  @include trim;
}

/// LIVE
/// These mixins and placeholders are designed to keep content pinned to the
/// live area of the site.
///
/// NOTE: They should not be used unless the parent container is using
/// "bleed" or "trim" otherwise you'll get odd indenting.
///
/// @mixin should only be used inside "@media" queries.
/// %placeholders should cannot be used inside "@media" queries.

@mixin live-left {
  padding-left: var(--safe-area-left);
}

/// @requires {mixin} live-left
%content-container-live-left {
  @include live-left;
}

@mixin live-right {
  padding-right: var(--safe-area-right);
}

/// @requires {mixin} live-right
%content-container-live-right {
  @include live-right;
}

/// @requires {mixin} live-left
/// @requires {mixin} live-right
@mixin live {
  @include live-left;
  @include live-right;

  max-width: site-config.$site-max-width;
  margin: 0 auto;
}

/// @requires {mixin} live
%content-container-live {
  @include live;
}

//  **************************************************
/// INSET

@mixin inset-left($columns: 1) {
  margin-left: calc(#{ site-config.column-width() } * #{ $columns });
}

@mixin inset-right($columns: 1) {
  margin-right: calc(#{ site-config.column-width() } * #{ $columns });
}

@mixin inset($columns: 1) {
  @include inset-left($columns);
  @include inset-right($columns);
}
