// =============================================================================
// :: Settings
// =============================================================================
$bgImageWidth: 60rem;
$bgImageHeight: 56rem;

// =============================================================================
// :: Interest rate
// =============================================================================
.c-interest-rate {
	position: relative;
	z-index: $z-index-ground;

	overflow: hidden;

	&::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(40% - #{$bgImageWidth});
		bottom: calc(50% - (#{$bgImageWidth}) * 0.9);
	}

	&::after {
		top: calc(50% - (#{$bgImageWidth}) * 0.9);
		right: calc(30% - #{$bgImageWidth});
	}
}

// =============================================================================
// :: Elements
// =============================================================================
.c-interest-rate__title {
	@include extend-heading-decorator--white();

	margin-bottom: 3.5rem;

	color: $text-color-light;
}

.c-interest-rate__text {
	max-width: 65rem;

	color: $text-color-light;

	p {
		color: inherit;
	}
}

.c-interest-rate__table {
	width: 100%;
	margin-top: 5rem;

	box-shadow: 0 0 3.7rem 0 $box-shadow-color-medium;
	border-radius: $border-radius-2x-small;
}

.c-interest-rate__body {
	@include respond-to(get-breakpoint("tablet")) {
		display: flex;
	}
}

.c-interest-rate__button {
	margin-top: 4rem;
}

.c-interest-rate__head,
.c-interest-rate__data {
	padding: 2.2rem 3rem;

	text-align: center;

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

.c-interest-rate__head {
	font-family: $font-family-primary;
	font-weight: $font-weight-medium;

	@include respond-to(get-breakpoint("tablet")) {
		border-right: $border-width-1x-small solid $border-color-medium;
	}

	@include respond-at(get-breakpoint("tablet")) {
		border-bottom: $border-width-1x-small solid $border-color-medium;
	}
}

.c-interest-rate__row {
	@include respond-to(get-breakpoint("tablet")) {
		display: flex;
		flex-direction: column;
		width: 50%;
	}
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-interest-rate__head--first {
	border-top-left-radius: $border-radius-2x-small;
}

.c-interest-rate__head--last {
	@include respond-to(get-breakpoint("tablet")) {
		border-bottom-left-radius: $border-radius-2x-small;
	}

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

.c-interest-rate__data--first {
	@include respond-to(get-breakpoint("tablet")) {
		border-top-right-radius: $border-radius-2x-small;
	}

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

.c-interest-rate__data--last {
	border-bottom-right-radius: $border-radius-2x-small;
}