//
// Panel custom styles
// 

// Light
//
$accordion-corporate-color: $gray-13;
$accordion-corporate-background: $gray-12;
$accordion-corporate-border: #dde1f0;
$accordion-corporate-content-color: $gray-5;
$accordion-corporate-arrow-color: $gray-13;
$accordion-corporate-arrow-background: $secondary;
$accordion-corporate-shadow: -1px 2px 5px 0px rgba(#444953, 0.12);
$accordion-corporate-border-radius: 0;
$accordion-corporate-header-padding: 21px 70px 21px 32px;
$accordion-corporate-content-padding: 15px 44px 20px nth($accordion-corporate-header-padding, 4);

// Panel groups
.card-group-custom {
	margin-bottom: 0;

	.card-header + .collapse > .card-body,
	.card-header + .collapse > .list-group {
		border-top: 0;
	}

	.card + .card {
		margin-top: 0;
	}
}

.card-group-custom.card-group-corporate {
	.card + .card {
		margin-top: 25px;
	}
}

.card-group-corporate + .card-group-corporate { margin-top: 30px; }

.card-custom {
	display: block;
	margin: 0;
	background: inherit;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-align: left;

	a {
		display: block;
	}

	// Panel heading
	.card-header {
		padding: 0;
		border-bottom: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		background-color: transparent;
	}

	// Panel contents
	.card-body {
		padding: 0;
		border: 0;
	}
}

* + .card-group-custom {
	margin-top: 35px;

	@include media-breakpoint-up(md) {
		margin-top: 50px;
	}
}

// Panel corporate
.card-corporate {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	text-align: left;
	.card-title {
		margin-bottom: 0;
	}

	.card-title a,
	.card-body {
		background: $accordion-corporate-background;
	}

	.card-icon {
		min-width: 25px;
		margin: -3px 10px -3px -10px;
		font-size: 20px;
		line-height: 1;
		color: $primary;
	}

	.card-title a {
		position: relative;
		z-index: 1;
		display: flex;
		width: 100%;
		padding: $accordion-corporate-header-padding;
		font-family: $font-family-sec;
		font-weight: 500;
		font-size: 15px;
		line-height: 1.25;
		letter-spacing: .05em;
		color: $accordion-corporate-color;
		transition: 1.3s all ease;
		border-radius: $accordion-corporate-border-radius $accordion-corporate-border-radius 0 0;
		border-bottom: 1px solid $accordion-corporate-border;

		@include media-breakpoint-up(lg) {
			font-size: 18px;
		}

		// Open state
		.card-arrow {
			&::after {
				opacity: 0;
				visibility: hidden;
			}
		}

		// Collapsed state
		&.collapsed {
			border-bottom-color: transparent;

			.card-arrow {
				background: $secondary;
				&::before,
				&::after {
					background: $accordion-corporate-arrow-color;
				}
				
				&::after {
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}

	// Panel arrow
	.card-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 10px;
		z-index: 2;
		width: 42px;
		height: 42px;
		line-height: 42px;
		border-radius: 50%;
		background: $primary;
		transition: .33s all ease;

		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 4;
			background: $white;
		}

		&::before {
			width: 14px;
			height: 2px;
			right: 28px;
		}

		&::after {
			width: 2px;
			height: 14px;
			right: 34px;
		}
	}

	.card-body {
		position: relative;
		z-index: 1;
		color: $accordion-corporate-content-color;
		padding: $accordion-corporate-content-padding;
		border-radius: 0 0 $accordion-corporate-border-radius $accordion-corporate-border-radius;
	}

	// Media queries
	@include media-breakpoint-down(md) {
		.card-title a,
		.card-body {
			padding-left: 25px;
		}
	}

	@include media-breakpoint-up(md) {
		.card-icon {
			min-width: 30px;
			font-size: 30px;
		}

		.card-title a {
			font-size: 18px;
		}
	}
}

.bg-gray-12 {
	.card-corporate {
		.card-title a,
		.card-body {
			background: $white;
		}
	}
}