/// @group o-overlay
/// @link http://registry.origami.ft.com/components/o-overlay

/// Overlay close button styles.
///
/// @output The output does not include a class definition, and should be wrapped in a selector.
/// @example scss - Output button styles
///   .my-close-button {
///       @include oOverlayContentClose();
///   }
/// @access public
@mixin oOverlayContentClose {
	@include _oOverlayContentCloseIcon(_oOverlayGet('default-close-text'));
	// start: undo button styles
	appearance: none;
	border: 0;
	font: inherit;
	outline: inherit;
	// end: undo button styles
	box-sizing: content-box;
	float: right;
	position: relative;
	margin: oPrivateSpacingByName('s3');
	padding: 0.25em;
	cursor: pointer;
	font-size: 8px;
	line-height: 1;
	user-select: none;

	// Increase hit zone of the button around it for better usability
	&:after {
		position: absolute;
		content: '';
		top: -(oPrivateSpacingByName('s3'));
		right: -(oPrivateSpacingByName('s3'));
		left: -(oPrivateSpacingByName('s3'));
		bottom: -(oPrivateSpacingByName('s3'));
	}
}

/// Outputs CSS property names and values for an overlay close button with an icon.
///
/// @param {Color} $color - The colour of the icon.
/// @output The output does not include a class definition, and should be wrapped in a selector.
/// @access private
@mixin _oOverlayContentCloseIcon($color) {
	@include oPrivateIconsContent('cross', $color, $size: 20px);
}