// -------------------------------------------------------------------
// :: CATEGORIES
// -------------------------------------------------------------------

.styleguide .o-categories {
	margin-top: 40px;	// get out from underneath the menu
}

.o-categories {
	@include FLOW-at($tablet){

		margin-left: 	-1*($grid-gutter-width / 4);
		margin-right: 	-1*($grid-gutter-width / 4);

		.o-categories__collection {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.o-category {
			&--primary {
				border: 1px solid $red;

				.o-category__body {
					background-color: $red-dark;
				}

				&:hover {
					background-color: $red-dark;
					border-color: $red-dark;
					transition: all 0.1s ease-in-out;
				}
			}

			&--secondary {
				border: 1px solid $light-medium;

				.o-category__body {
					background-color: $white;
				}

				&:hover {
					background-color: darken($white, 1%);
					transition: all 0.1s ease-in-out;
				}
			}

			.o-category__body_close {
				display: block;
			}

			position: relative;

			&:before {
				display: none;
			}



			&__header {
				display: flex;
				text-align: center;
				align-content: center;
				height: 100%;

				strong {
					flex: 0 1 100%;
					align-self: center;
					font-size: rem(20px);
				}
			}

			flex: 0 1 45%;
			min-height: rem(130px);
			max-height: rem(200px);
			height: 20vh;
			margin-left:  ($grid-gutter-width / 4);
			margin-right: ($grid-gutter-width / 4);
			margin-bottom: ($grid-gutter-width / 2);

			.o-category__body {

				.o-category__close {
					display: block;
					width: 30px;
					height: 30px;
				}

				display: block;
				opacity: 0;
				transition: all 0.2s ease-in-out;
				padding: rem($grid-gutter-width) 0;
				transform-origin: center center;
				transform: scale(0);
				border-radius: rem(5px);
				position: absolute;
				overflow: hidden;
				top: -1*$grid-gutter-width;
				left: -1*$grid-gutter-width;
				right: -1*$grid-gutter-width;
				bottom: -1*$grid-gutter-width;

				z-index: $z-index-highest;
				text-align: center;
				box-shadow: $dropshadow_closer;
			}

			&--active {
				.o-category__body {
					opacity: 1;
					transform: scale(1);
				}
			}
		}
	}

	@include FLOW-at($desktop) {
		.o-category {
			flex: 0 1 31%;
			min-height: rem(180px);
		}
	}

	.a-button {

		&:hover {
			text-decoration: none;
		}

		&:before,
		&:after {
			display: none;
		}
	}
}

.o-category {
	position: relative;
	border-radius: rem(5px);
	margin-bottom: rem(3px);
	padding: rem(8px) rem(15px);
	transition: all 0.5s ease-in-out;

	&--primary {
		background: $red;
		color: $white;
		border: 1px solid $red;

		a {
			color: $white;
			text-decoration: none;
		}
	}

	&--secondary {
		background: $white;
		color: $dark-extra;
		border: 1px solid $light-medium;

		a {
			color: $dark-extra;
			text-decoration: none;
		}
	}
}

a.o-category {
	display: block;
	text-decoration: none;
}

div.o-category {
	@extend %__icon-arrow-down;

	.o-category__close {
		@extend %__icon-close;

		cursor: pointer;
		display: none;
		position: absolute;
		top: rem(15px);
		right: rem(15px);
		transition: all 0.2s ease-in-out;
	}

	&:before {
		display: block;
		position: absolute;
		top: rem(15px);
		right: rem(15px);
		transition: all 0.2s ease-in-out;
	}

	&__header {
		cursor: pointer;
	}

	&__body {
		display: none;

		&:before {
			display: none;
		}

		ul {
			padding: 0;
		}

		li {
			list-style: none;
			margin: rem(13px) 0;
		}

		a {
			&:hover {
				text-decoration: underline;
			}
		}
	}

	&__cta {
		background: transparent !important;
		border: none !important;
		line-height: 1.4 !important;
		padding: 0 !important;
		margin: rem(15px) 0 !important;
		font-size: 1rem;
		text-decoration: none !important;

		&:before,
		&:after {
			background: transparent !important;
		}

		@include FLOW-to($tablet){
			display: block !important;
			text-align: left !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
	}



	&.o-category--primary.o-category--active {
		background: $red-dark;
		border-color: $red-dark;
	}

	&--active {
		&:before {
			transform-origin: center center;
			transform: rotate(180deg);
		}
	}

	&__body,
	&__close {
		display: none;
	}

}