/* In the [$o-languages] map we define some settings:
 *
 * 'columns'.key 	=	number of items in a row
 * 'columns'.value 	= 	breakpoint size from which we want that number of items
 */


$o-languages: (
	'gap' : space(2),
	'columns': (
		2: 760,
		3: 1180,
	),
);

// Get values from the map and place them in an easy to access variable
$o-languages-columns: 				map-get($o-languages, 'columns'); // get the 'columns' list
$o-languages-column-keys: 			map-keys($o-languages-columns); // get a list of the keys from the 'columns'
$o-languages-column-smallest-bp: 	map-get($o-languages-columns, nth($o-languages-column-keys, 1)); // get breakpoint value of the first column
$o-languages-transition-speed:      150ms;


.o-languages__list {
	@include mq($o-languages-column-smallest-bp) {
		display: flex;
		flex-wrap: wrap;
		margin: map-get($o-languages, 'gap') * -1;
	}
}


.o-languages__item {
	margin: space(6) auto;
	list-style-type: none;

	// Loop through all defined columns
	@each $count, $breakpoint in $o-languages-columns {
		$i: index($o-languages-columns, ($count $breakpoint));

		@include mq(map-get($o-languages-columns, $count)) {
			@if($i == 1) {
				// Only set these values for the first media query, no need to set them every time
				flex: none;
				margin: map-get($o-languages, 'gap');
			}

			// in case of a bug in IE we need to specify flex-basis longhand property: https://github.com/philipwalton/flexbugs#flexbug-8
			width: calc(#{percentage(1 / $count)} - (#{map-get($o-languages, 'gap')} * 2));
		}
	}
}


.o-languages__link {
	@include border-radius(xs);
	display: flex;
	align-items: center;
	text-decoration: none;
	padding: space(2.5);
	background-color: palette(neutral, 0);
	border-bottom-right-radius: map-get($border-radius, l);
	box-shadow: 0 10px 24px 0 rgba(0,0,0,0.08);
	transition: all $o-languages-transition-speed linear;
}


.o-languages__flag {
	@include border-radius(xs);
	overflow: hidden;
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
	margin-right: space(3);
	color: palette(neutral, 0);
	border: 2px solid transparent;

	&.jp, &.kr {
		border-color: palette(primary, 100);
	}


	& svg {
		width: 100%;
		height: 100%;
	}
}

.o-languages__flag--holder {
	@include border-radius(xs);
	background-color: palette(primary, 100);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: palette(primary, 700);
	@include font-size('xs');
	@include font-weight(extraBold);
	text-transform: uppercase;
}


.o-languages__label {
	@include font-weight(semiBold);
	color: palette(neutral, 700);
	transition: color $o-languages-transition-speed linear;
}


.o-languages__arrow {
	width: 24px;
	margin-left: auto;
	color: palette(primary, 200);
	transition: color $o-languages-transition-speed linear;
}


.o-languages__link:hover {
	background-color: palette(primary, 100);
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.04);

	.o-languages__label {
		color: palette(primary, 500);
	}

	.o-languages__arrow {
		color: palette(primary, 500);
	}
}