/**
 * Subfooter
 */

.o-subfooter {
	@include template(copyright, trademark, nav);
	@include z(z-subfooter);
	@include text-style(5);
	@include font-family(base);
	color: palette(action, 300);
}


.o-subfooter__main {
	@include contain;
	border-top: 1px solid palette(primary, border);
	display: grid;
	grid-template-columns: 6fr 11fr;
	grid-template-areas:
		"nav nav"
		"copyright trademark";

	@include mq(750){
		grid-template-columns: auto auto;
		grid-template-areas:
			"nav trademark"
			"copyright .";
	}

	@include mq(l){
		grid-template-columns: 3fr auto 4fr;
		grid-gap: space(3);
		grid-template-areas:
			"copyright nav trademark";
	}

	.is-simple & {
		@include mq(750, l) {
			grid-template-areas: "copyright trademark";
		}
	}
}


.o-subfooter__copyright {
	display: flex;
	flex-wrap: wrap;
	padding: space(2.5) 0;
}


.o-subfooter__home {
	text-decoration: none;

	&:hover {
		color: scale_color(palette(action, 300), $lightness: 40%);
	}
}


.o-subfooter__trademark {
	padding: calc(#{space(2.5)} - #{double(4px)}) 0;
	text-align: right;
}


.o-subfooter__list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: space(1.5) 0;
	margin: 0 space(-1);

	@include mq(l) {
		justify-content: flex-end;
	}
}


.o-subfooter__item {
	@for $i from 1 through 5 {
		&[data-order='#{$i}'] {
			order: #{$i};
		}
	}
}


.o-subfooter__link {
	display: block;
	padding: space(1);
	text-decoration: none;

	@include mq(l){
		padding: space(1) space(2);
	}

	&:hover {
		color: scale_color(palette(action, 300), $lightness: 40%);
	}
}