//------------------------------------------------------------------------------------------------
// ICON OBJECT
//------------------------------------------------------------------------------------------------

/*
A collection of sized objects great for applying to icon sized images for quick
and easy sizing. These are generated programatically using the $icon-sizes
map.

If you're sizing an icon and none of these sizes are suitable, it probably 
means it belongs in a component file as a bespoke class.
*/

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

// If we're applying class to a block element
[class*='o-icon'] {
	display: inline-block;
	& svg {
		width: 100%;
		height: 100%;
		display: block;
	}
}

// Example: o-icon-small
@each $size-name, $size-value in $icon-sizes {
	.o-icon-#{$size-name} {
		width: rem($size-value);
		height: rem($size-value);
	}
}

// Changes icon size when breakpoint is hit
// Example: o-icon-large@md
@each $bp-name, $bp-value in $mq-breakpoints {
	@include mq(#{$bp-name}) {
		@each $size-name, $size-value in $icon-sizes {
			.o-icon-#{$size-name}\@#{$bp-name} {
				width: rem($size-value);
				height: rem($size-value);
			}
		}
	}
}


// DISABLE DIRECTION MODIFIERS
//------------------------------------------------------------------------------------------------

/*
Disables the width/height sizes to allow non-square icons to have a more appropriate bounding box
*/

.o-icon--width {
	height: auto;
}

.o-icon--height {
	width: auto;
}


// CIRCLE MODIFIER
//------------------------------------------------------------------------------------------------

/*
For circular icons which are made focusable, this makes the focus area also
circular, rather than square.
*/

.o-icon--circle[tabindex],
a.o-icon--circle {
	border-radius: 50%;
	&:focus {
		outline: none;
	}
}


// ROTATION MODIFIERS
//------------------------------------------------------------------------------------------------

/*
Rotates the icon by 90deg blocks to facilitate easier reuse of icons
*/

.o-icon--flip,
.c-icon--flip-1\/2 {
	transform: rotate(180deg);
}

.o-icon--flip-1\/4 {
	transform: rotate(90deg);
}

.o-icon--flip-3\/4 {
	transform: rotate(270deg);
}

@keyframes spin {
	from {
	  transform: rotate(0deg);
	}

	to {
	  transform: rotate(360deg);
	}
}

.o-icon--spin {
	animation-name: spin;
	animation-duration: 0.75s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}