////////////////////////////////////////////////////////////////////////////////
/// Position                                                           #position
////////////////////////////////////////////////////////////////////////////////

@mixin expanded {
	position:absolute; 
	inset:0; 
	left:0; 
	width:100%;
	height:100%; 
  @supports not (inset:0px) { top:0; left:0; right:0; bottom:0; }
}

@mixin centre {
  position:absolute; 
	top:50%; 
	left:50%;
  transform:translate(-50%, -50%); 
}

@mixin blowout($horizontal : true, $vertical : false) {
  
  position:absolute;

  @if $horizontal and $vertical {
    top       : 50%; 
    left      : 50%; 
    width     : 100vw;
    height    : 100vh; 
    transform : translate(var(--translateX, -50%), var(--translateY, -50%));
  } @else if $horizontal  {
    top       : 0; 
    left      : 50%; 
    width     : 100vw;
    height    : 100%; 
    transform : translateX(var(--translateX, -50%));
  } @else if $vertical  {
    top       : 50%; 
    left      : 0; 
    width     : 100%;
    height    : 100vh; 
    transform : translateY(var(--translateY, -50%));
  }

}