@use "./site-config";

/// Make sure the content doesn't touch the sides, has safe area.
@mixin safe-area-content {
  padding-inline: var(--safe-area-inline);
}

/// Touch the sides, no safe area.
@mixin bleed {
  margin-inline: calc(calc(-50vw + 50%) - (var(--scrollbar-width, 0px) / 2 * -1));
  transition: margin 200ms ease-in-out;
}

/// Make sure the content doesn't touch the sides.
/// Only use this if parent element uses %bleed.
@mixin bleed-content {
  padding-inline: var(--bleed-safe-area-inline);
}

/// Touch the side, has safe area.
@mixin bleed-safe-area {
  margin-inline: calc(calc(-50vw + 50%) - (var(--scrollbar-width, 0px) / 2 * -1) + var(--bleed-safe-area-inline));
  transition: margin 200ms ease-in-out;
}

/// Make sure the content doesn't touch the sides, has safe area.
/// Only use this if parent element uses %bleed-safe-area/
@mixin bleed-safe-area-content {
  padding-inline: calc(var(--safe-area-inline) - var(--bleed-safe-area-inline));
}
