// ------------------------------------
// FLYOUT BLOCK
// ------------------------------------

[data-flyout-content] {
	// max-width
	max-width: $container-width-mobile;
	@media (#{$bp-larger-than-tablet}) { max-width: $container-width-tablet; }
	@media (#{$bp-larger-than-desktop}) { max-width: $container-width-desktop; }
	@media (#{$bp-larger-than-desktop-medium}) { max-width: $container-width-desktop-medium; }
	@media (#{$bp-larger-than-desktop-large}) { max-width: $container-width-desktop-large; }
	@media (#{$bp-larger-than-desktop-extra-large}) { max-width: $container-width-desktop-extra-large; }

	// padding
	padding: $global-spacing-small $container-spacing-mobile;
	@media (#{$bp-larger-than-tablet}) { padding: $global-spacing-small $container-spacing-tablet; }
	@media (#{$bp-larger-than-desktop}) { padding: $global-spacing-small $container-spacing-desktop; }
	@media (#{$bp-larger-than-desktop-medium}) { padding: $global-spacing-small $container-spacing-desktop-medium; }
	@media (#{$bp-larger-than-desktop-large}) { padding: $global-spacing-small $container-spacing-desktop-large; }
	@media (#{$bp-larger-than-desktop-extra-large}) { padding: $global-spacing-small $container-spacing-desktop-extra-large; }
}



.button--flyout-close {
	position: absolute;
	top: $global-spacing-small;
	#{ $alignment-right }: $global-spacing-small;
	color: inherit;
}
.button--flyout-close:before {
	@include icon( 'i-x' );
	@include icon-size( $icon-size );
}



.has-flyout--open .flyout-overlay {
	#{ $alignment-left }: 0;
	z-index: z( 'modal' ) - 1;
}

.has-flyout [data-flyout].is-activated.is-open {
	#{ $alignment-left }: 0;
	z-index: z( 'modal' );
}
