//------------------------------------------------------------------------------------------------
// BOX
//------------------------------------------------------------------------------------------------

/*
Decorated box component for boxing off content. Use in conjunction with
box object pattern.
*/


// COMPONENT COLOURS
//------------------------------------------------------------------------------------------------

/*
Easily assign colours to the button component without having to
find/replace variables.
*/

$component-box-color: 'very-light' !default;
$component-box-border-color: 'light' !default;
$component-box-focus-color: 'primary' !default;


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

.c-box,
.c-box-light {
	transition: box-shadow $global-transition-duration, background-color $global-transition-duration, border-color $global-transition-duration, color $global-transition-duration, opacity $global-transition-duration-fast, margin $global-transition-duration-fast;
	
	&:focus {
		outline: none;
		box-shadow: 0 rem(1px) rem(3px) rgba(0, 0, 0, 0.25), 0 0 rem(15px) rem(3px) rgba(color($component-box-focus-color), 0.5) /* [3] */
	}
	
	background-color: color($component-box-color);
}

// Alt box with white background
.c-box-light {
	background-color: color('white');
}

// Ion for when the box needs to be closed
.c-box__close {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	box-sizing: content-box;
}


// ROUNDED CORNERS MODIFIERS
//------------------------------------------------------------------------------------------------


.c-box--rounded,
.c-box--rounded-right,
.c-box--rounded-top-right,
.c-box--rounded-top {
	border-top-right-radius: rem($global-border-radius-large);
}

.c-box--rounded,
.c-box--rounded-left,
.c-box--rounded-top-left,
.c-box--rounded-top {
	border-top-left-radius: rem($global-border-radius-large);
}

.c-box--rounded,
.c-box--rounded-left,
.c-box--rounded-bottom,
.c-box--rounded-bottom-left {
	border-bottom-left-radius: rem($global-border-radius-large);
}

.c-box--rounded,
.c-box--rounded-right,
.c-box--rounded-bottom,
.c-box--rounded-bottom-right {
	border-bottom-right-radius: rem($global-border-radius-large);
}

.c-box--circular {
	border-radius: 50%;
}


// SHADOW MODIFIER
//------------------------------------------------------------------------------------------------

.c-box--shadow {
	box-shadow: 0 0 rem(10px) 0 rgba(0, 0, 0, 0.2);
}


// HIDE OVERFLOW MODIFIER
//------------------------------------------------------------------------------------------------

.c-box--hide-overflow {
	overflow: hidden;
}


// BORDER MODIFIERS
//------------------------------------------------------------------------------------------------

.c-box--border,
.c-box--border-top,
.c-box--border-horizontal {
	border-top: rem(1px) solid color($component-box-border-color);
}

.c-box--border,
.c-box--border-horizontal,
.c-box--border-bottom {
	border-bottom: rem(1px) solid color($component-box-border-color);
}

.c-box--border,
.c-box--border-vertical,
.c-box--border-left {
	border-left: rem(1px) solid color($component-box-border-color);
}

.c-box--border,
.c-box--border-vertical,
.c-box--border-right {
	border-right: rem(1px) solid color($component-box-border-color);
}


// STATEFUL MODIFIERS
//------------------------------------------------------------------------------------------------

@each $state in ('positive', 'negative', 'caution', 'info') {
	.c-box.is-#{$state},
	.c-box-light.is-#{$state} {
		background-color: color('#{$state}-light');
		border-color: color('#{$state}');
		
		svg {
			fill: color('#{$state}');
		}
	}
}


// TABS MIX
//------------------------------------------------------------------------------------------------

/*
Tweaks padding, so tabs placed with the box align with the bottom correctly
*/

.c-box__tabs {
	position: relative;
	bottom: rem(-1px);
	
	.c-tabs__layout:before {
		display: none;
	}
}