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

[data-flyout-content] {
	display: none;

	// 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; }
}

[data-flyout].is-activated.is-open [data-flyout-content] {
	display: block;
}



.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' );
}



.has-flyout [data-flyout][data-flyout-modal].is-activated [data-flyout-content] {
    @media (#{$bp-larger-than-phablet}) {
        margin: 10vh auto;
        max-height: 80vh;
        max-width: 80%;
        height: auto;
    }
}



.has-flyout a[data-flyout-toggle][role="button"] {
	cursor: pointer;
}