// =============================================================================
// :: Settings
// =============================================================================
$bgImageWidth: 45rem;
$bgImageHeight: 34rem;

// =============================================================================
// :: Footer
// =============================================================================
.c-footer {
	overflow: hidden;

	background-color: $background-color-pink;
}

// =============================================================================
// :: Elements
// =============================================================================
.c-footer__meta {
	display: flex;
	align-items: center;
	padding: 2.2rem 0;
}

.c-footer__meta-background {
	position: relative;
	z-index: 2;

	background-color: $background-color-pink-dark;
}

.c-footer__content {
	position: relative;
	z-index: $z-index-ground;

	&::before,
	&::after {
		content: "";

		position: absolute;
		z-index: $z-index-pit;

		width: $bgImageWidth;
		height: 100%;

		background-image: url("/assets/images/general/background/bg-rate.svg");
		background-repeat: no-repeat;
	}

	&::before {
		left: calc(0% - (#{$bgImageWidth} * 0.5));
		bottom: calc(50% - (#{$bgImageHeight} * 0.9));
	}

	&::after {
		top: calc(100% - (#{$bgImageHeight} * 0.5));
		right: calc(0% - (#{$bgImageWidth} * 0.5));
	}

	@include respond-at(get-breakpoint("desktop")) {

		&::before {
			left: calc(0% - (#{$bgImageWidth} * 0.5));
			bottom: calc(50% - (#{$bgImageHeight} * 0.6));
		}

		&::after {
			top: calc(50% - (#{$bgImageHeight} * 0.8));
			right: calc(0% - (#{$bgImageWidth} * 0.5));
		}
	}
}

.c-footer__grid {
	text-align: right;

	@include respond-at(get-breakpoint("tablet")) {
		text-align: left;
	}
}

.c-footer__title {
	font-family: $font-family-primary;
	font-weight: $font-weight-bold;

	color: $text-color-light;

	@include respond-at(get-breakpoint("tablet")) {

		&::after {
			content: "";

			display: block;
			width: 3rem;
			height: 0.3rem;

			margin-top: 2.3rem;

			background-color: $background-color-base;
			border-radius: $border-radius-base;
		}
	}
}

.c-footer__list,
.c-footer__meta-list,
.c-footer__numbers {
	@include extend-list-clear();
}

.c-footer__meta-list,
.c-footer__numbers {
	display: flex;

	@include respond-to(get-breakpoint("tablet")) {
		flex-wrap: wrap;
		justify-content: center;
	}
}

.c-footer__list-item,
.c-footer__list-link,
.c-footer__meta-list-link {
	color: $text-color-light;
}

.c-footer__list-item,
.c-footer__list-link {
	font-size: $font-size-1x-small;
	font-weight: $font-weight-medium;
}

.c-footer__list-item {
	margin-bottom: 2.2rem;
}

.c-footer__list {
	display: none;

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

.c-footer__meta-list-item,
.c-footer__numbers-item {

	&::after {
		content: "-";

		padding: 0 0.8rem;

		color: $text-color-light;
	}

	&:last-child {

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

.c-footer__numbers-item {

	&::after {
		color: $text-color-lighter;
	}
}

.c-footer__meta-list-link {
	font-size: $font-size-2x-small;
	font-weight: $font-weight-medium;
}

.c-footer__numbers-item,
.c-footer__address,
.c-footer__address p {
	font-size: $font-size-2x-small;
	font-weight: $font-weight-medium;

	color: $text-color-lighter;
}

.c-footer__address {
	font-style: normal;

	@include respond-to(get-breakpoint("tablet")) {
		text-align: center;
	}
}

.c-footer__meta-list {
	margin-bottom: 1.5rem;
}

.c-footer__numbers {
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.c-footer__logo {

	@include respond-to(get-breakpoint("tablet")) {
		position: absolute;
		top: 3.5rem;
		left: 0;

		&.c-logo {
			width: 100%;
			max-width: 10rem;
		}
	}

	@include respond-at(get-breakpoint("tablet")) {
		margin-right: 6rem;

		&.c-logo {
			width: 100%;
			max-width: 8rem;
		}
	}
}

.c-footer__meta-content {
	width: 100%;
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-footer__list--last {
	display: block;
}

.c-footer__item--last {
	@include respond-to(get-breakpoint("tablet")) {
		position: relative;

		padding-top: 5.5rem;

		&::before {
			content: "";

			position: absolute;
			top: 0;
			right: 0;

			display: block;
			width: 3rem;
			height: 0.3rem;

			background-color: $background-color-base;
			border-radius: $border-radius-base;
		}
	}
}