// =============================================================================
// :: Settings
// =============================================================================
$arrow-size: 2.5rem;
$arrow-size-1x-small: 2rem;

$backgroundImageWidth: 11rem;
$backgroundImageHeight: 165rem;

// =============================================================================
// :: Bubble
// =============================================================================
.c-bubble {
	position: relative;

	width: 100%;
	padding: 2rem;

	border-radius: $border-radius-1x-small;
	box-shadow: $box-shadow-light;
	background: $border-color-light;

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

a.c-bubble {

	&:hover {
		background-color: $purple-light-solid;

		cursor: pointer;
	}
}

// =============================================================================
// :: Elements
// =============================================================================
.c-bubble__button {
	position: absolute;
	top: 50%;
	right: 2rem;

	display: flex;
	justify-content: center;
	align-items: center;
	width: 4.5rem;
	height: 4.5rem;

	background-color: $background-color-pink;
	border: none;
	border-radius: $border-radius-base;

	transform: translateY(-50%);

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

	&:hover {
		background-color: $background-color-purple;

		.c-bubble__icon {
			transform: rotate(180deg);
		}
	}
}

.c-bubble__icon {
	padding-top: 0.2rem;

	font-size: $font-size-1x-large;

	color: $text-color-light;

	transition: transform 0.3s ease-in-out;

	@include respond-at(get-breakpoint("tablet")) {
		padding-top: 0.5rem;

		font-size: $font-size-3x-large;
	}
}

.c-bubble__image-container {
	width: 100%;

	border-radius: $border-radius-1x-small;
	background-size: cover;
	background-position: center;

	clip-path: url(#c-bubble__mask);

	@supports (clip-path: url(#c-bubble__mask)) {
		border-radius: 0;
	}
}

.c-bubble__content {
	display: flex;
	align-items: center;
}

.c-bubble__text {
	margin-right: 2rem;

	font-family: $font-family-primary;
	font-size: $font-size-base;

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

	p {
		font-family: $font-family-primary;
		font-size: $font-size-base;

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

	strong {
		font-weight: $font-weight-bold;

		color: $text-color-highlight;
	}
}

.c-bubble__close {
	position: absolute;
	top: 5px;
	right: 15px;

	&:hover {
		cursor: pointer;
	}
}

.c-bubble__visual {
	position: relative;
	z-index: $z-index-cellar;

	width: 100%;
	max-width: 20rem;
	height: 100%;
	margin-right: -2rem;

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

.c-bubble__image-background {
	z-index: $z-index-pit;

	width: $backgroundImageWidth;
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-bubble--arrow-left,
.c-bubble--arrow-right {

	&::before {
		content: "";

		position: absolute;
		top: 50%;

		border-top: $border-radius-1x-small solid transparent;
		border-bottom: $border-radius-1x-small solid transparent;

		transform: translateY(-50%);
	}
}

.c-bubble--arrow-left {

	&::before {
		left: -$arrow-size;

		border-right: $border-radius-1x-small solid $border-color-light;
	}
}

.c-bubble--arrow-right {

	&::before {
		right: -$arrow-size;

		border-left: $border-radius-1x-small solid $border-color-light;
	}
}

.c-bubble--arrow-left-responsive {

	&::before {
		content: "";

		position: absolute;
		top: -$arrow-size;
		left: 50%;

		border-left: $border-radius-1x-small solid transparent;
		border-right: $border-radius-1x-small solid transparent;
		border-bottom: $border-radius-1x-small solid $border-color-light;

		transform: translateX(-50%);
	}

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

		&::before {
			top: 50%;
			left: -$arrow-size;

			border-top: $border-radius-1x-small solid transparent;
			border-right: $border-radius-1x-small solid $border-color-light;
			border-bottom: $border-radius-1x-small solid transparent;
			border-left: none;

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

a.c-bubble--arrow-left-responsive {

	&:hover {

		&::before {
			border-right-color: $purple-light-solid;
		}
	}
}

.c-bubble--arrow-right-responsive {

	&::before {
		content: "";

		position: absolute;

		left: 2 * $arrow-size;
		bottom: -$arrow-size;

		border-top: $border-radius-1x-small solid $border-color-light;
		border-left: $border-radius-1x-small solid transparent;
		border-right: $border-radius-1x-small solid transparent;
	}

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

		&::before {
			top: 50%;
			left: auto;
			bottom: auto;
			right: -$arrow-size;

			border-top: $border-radius-1x-small solid transparent;
			border-bottom: $border-radius-1x-small solid transparent;
			border-left: $border-radius-1x-small solid $border-color-light;
			border-right: none;

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

.c-bubble--arrow-top,
.c-bubble--arrow-bottom {

	&::before {
		content: "";

		position: absolute;
		left: 5rem;

		border-left: $arrow-size solid transparent;
		border-right: $arrow-size solid transparent;
	}
}

.c-bubble--arrow-top {

	&::before {
		top: -$arrow-size;

		border-bottom: $arrow-size solid $border-color-light;
	}
}

.c-bubble--arrow-bottom {

	&::before {
		bottom: -$arrow-size;

		border-top: $arrow-size solid $border-color-light;
	}
}

.c-bubble--small-corners {
	border-radius: 1.5rem;
}

.c-bubble__image-background--blue {
	position: absolute;
	top: 0;
	right: -15%;

	height: 100%;

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

	@supports (clip-path: url(#c-bubble__mask)) {
		right: 0;
	}
}

.c-bubble__image-background--pink {
	position: absolute;
	top: 0;
	left: -15%;

	height: 100%;

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

	@supports (clip-path: url(#c-bubble__mask)) {
		left: 0;
	}
}

.c-bubble--theme-pink {
	display: inline-block;
	width: auto;
	padding: 2.5rem;

	background-color: $background-color-pink;

	.c-bubble__text {
		margin-right: 0;

		color: $text-color-light;
	}

	.c-bubble__close {
		color: $text-color-light;
	}

	&::before {
		content: "";

		position: absolute;
		left: 5rem;
		bottom: -$arrow-size-1x-small;

		border-left: $arrow-size-1x-small solid transparent;
		border-right: $arrow-size-1x-small solid transparent;
		border-top: $arrow-size-1x-small solid $border-color-base;
	}
}