// =============================================================================
// :: Interest table
// =============================================================================
// .c-interest-table {}

// =============================================================================
// :: Elements
// =============================================================================
.c-interest-table__container {
	// necessary for the z-index of c-interest-table__header
	display: flex;
	flex-direction: column;
}

.c-interest-table__header {
	z-index: $z-index-ground;

	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;

	@include respond-at(get-breakpoint("tablet")) {
		flex-direction: row;
		align-items: center;
	}
}

.c-interest-table__head,
.c-interest-table__data {
	padding: 2rem 0.5rem;

	font-size: $font-size-1x-small;
	text-align: center;

	@include respond-at(get-breakpoint("tablet")) {
		padding: 2rem 1rem;
	}

	@include respond-at(get-breakpoint("desktop")) {
		padding: 2rem;

		font-size: $font-size-base;
	}
}

.c-interest-table__head {
	min-width: 12rem;

	font-size: $font-size-1x-small;
	font-weight: $font-weight-medium;

	white-space: nowrap;

	color: $text-color-light;
	background-color: $background-color-pink;

	@include respond-at(get-breakpoint("desktop")) {
		font-size: $font-size-base;
	}

	.c-interest-table__flyout {

		.c-flyout__content {
			max-width: 30rem;
		}
	}
}

.c-interest-table__data {
	border-bottom: $border-width-1x-small solid $border-color-medium;
}

.c-interest-table__content-container {
	position: relative;
	z-index: $z-index-ground + 1;
}

.c-interest-table__content {
	position: absolute;
	top: 0;
	left: 0;

	display: none;
	width: 100%;

	opacity: 0;

	background-color: $background-color-base;
	box-shadow: 0 0.4rem 0.8rem 0 $box-shadow-color-light;
	border: none;
	border-top-right-radius: $border-radius-2x-small;
	border-bottom-right-radius: $border-radius-2x-small;

	transition: opacity 0.3s ease-in-out;
}

.c-interest-table__item {
	flex-grow: 1;
}

.c-interest-table__list {
	display: flex;
	flex-grow: 1;

	width: 100%;
	padding: 0;

	list-style: none;

	@include respond-at(get-breakpoint("tablet")) {
		width: auto;
	}
}

.c-interest-table__list-item {
	position: relative;

	width: 100%;
	max-width: 25rem;
	margin-right: 1rem;

	&:last-child {
		margin-right: 0;
	}
}

.c-interest-table__button {
	width: 100%;
	height: 100%;
	padding: 2.2rem 0;

	text-align: center;

	background-color: $background-color-base;
	border: none;
	border-top-left-radius: $border-radius-2x-small;
	border-top-right-radius: $border-radius-2x-small;
	box-shadow: 0 0.4rem 0.8rem 0 $box-shadow-color-light;

	transition: background-color 0.3s ease-in-out;

	cursor: pointer;
}

.c-interest-table__flyout {
	position: absolute;
	top: 50%;
	right: 1rem;
	z-index: $z-index-ground;

	transform: translateX(-50%) translateY(-50%);

	&::before {
		display: none;

		@include respond-at(get-breakpoint("tablet")) {
			display: block;
		}
	}
}

.c-interest-table__icon {
	color: $text-color-medium;
}

.c-interest-table__list-item-title {
	font-family: $font-family-primary;
	font-size: $font-size-base;
	font-weight: $font-weight-medium;

	transition: color 0.3s ease-in-out;

	@include respond-at(get-breakpoint("desktop")) {
		font-size: $font-size-1x-large;
	}
}

.c-interest-table__collapse {
	width: auto;
	margin-bottom: 3rem;

	@include respond-at(get-breakpoint("tablet")) {
		margin-bottom: 0;
		margin-left: 2rem;
	}

	.c-input__label {

		@include respond-at(get-breakpoint("tablet")) {
			display: none;
		}
	}

	.c-input__wrapper {
		min-width: 16rem;
	}
}

.c-interest-table__item-content {
	width: 100%;
}

.c-interest-table__expand {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-self: center;

	max-width: 20rem;
	padding: 1.5rem 3.4rem;

	background-color: $background-color-base;
	border: none;
	border-radius: $border-radius-3x-small;
	box-shadow: 0 0.4rem 0.8rem 0 $box-shadow-color-light;

	@include respond-at(get-breakpoint("tablet")) {
		display: none;
	}
}

.c-interest-table__expand-text {
	font-weight: $font-weight-medium;

	white-space: nowrap;

	color: $text-color-base;
}

.c-interest-table__expand-icon {
	margin-left: 2rem;
	padding-bottom: 0.5rem;
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-interest-table__head--last {

	@include respond-at(get-breakpoint("tablet")) {
		border: none;
		border-top-right-radius: $border-radius-2x-small;
	}
}

.c-interest-table__head--with-icon {
	position: relative;
}

.c-interest-table__item--toggle {
	position: relative;

	overflow-x: auto;
}

.c-interest-table__body--bg-gray {

	.c-interest-table__row,
	.c-interest-table__static {
		background-color: $background-color-light;

		@include respond-at(get-breakpoint("tablet")) {
			background-color: $background-color-base;
		}
	}
}

.c-interest-table__flyout--small {
	right: -1rem;

	@include respond-at(get-breakpoint("desktop")) {
		right: 0;
	}
}

// =============================================================================
// :: States
// =============================================================================
.c-interest-table__button {

	&.is-active {
		background-color: $background-color-pink;

		.c-interest-table__list-item-title {
			color: $text-color-light;
		}

		.c-interest-table__icon {
			color: $text-color-light;
		}
	}
}

.c-interest-table__content {

	&.is-active {
		position: relative;

		display: flex;

		opacity: 1;
	}
}

.c-interest-table__static,
.c-interest-table__row--expandable {

	&.is-hidden {
		display: none;
	}
}