$o-bubbles-transition-speed:        175ms;
$o-bubbles-bp1:                     900;
$o-bubbles-bp2:                     1180;
$o-bubbles-gap:                     8px;


.o-bubbles__list {
	margin-left: 0;
	list-style: none;

	@include mq($o-bubbles-bp1) {
		display: flex;
		flex-wrap: wrap;
		margin: ($o-bubbles-gap * -1);
	}
}


.o-bubbles__item {
	margin: space(6) auto;
	list-style-type: none;

	@include mq($o-bubbles-bp1) {
		flex: none;
		margin: $o-bubbles-gap;
		// in case of a bug in IE we use width instead of flex-basis
		width: calc(#{percentage(1/3)} - (#{$o-bubbles-gap} * 2));
	}

}


.o-bubbles__link {
	display: flex;
	align-items: flex-start;
	text-decoration: none;
	margin: space(2) 0 space(2) space(2);

	@include mq($max: $o-bubbles-bp1) {
		max-width: 440px;
		margin: 16px auto;
	}
}


.o-bubbles__icon {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin-right: space(5);
	color: palette(neutral, 0);
	background-image: linear-gradient(to bottom left, palette(secondary, 400), palette(secondary, 500), scale_color(palette(secondary, 500), $lightness: -20%));
	background-size: auto 200%;
	background-position: 0 0;
	border-radius: 50%;
	transition: all $o-bubbles-transition-speed ease-in-out;

	&::before,
	&::after {
		content: '';
		position: absolute;
		z-index: 0;
		top: space(-1);
		bottom: space(-1);
		right: space(-1);
		left: space(-1);
		border: 1px solid palette(secondary, 400);
		border-radius: 50%;
		transition: all $o-bubbles-transition-speed ease-in-out;
		transition-delay: 125ms;
		pointer-events: none;
	}

	&::after {
		top: space(-2);
		bottom: space(-2);
		right: space(-2);
		left: space(-2);
		opacity: 0.5;
		transition-delay: 100ms;
	}

	svg {
		transition: all $o-bubbles-transition-speed ease-in-out;
	}

	@include mq($max: $o-bubbles-bp2) {
		width: 48px;
		height: 48px;

		svg {
			transform: scale(0.5);
		}
	}
}


.o-bubbles__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: space(2);

	@include mq($max: $o-bubbles-bp2) {
		margin-top: 0;
		transform: scale(0.9);
		transform-origin: left;
	}
}


.o-bubbles__title {
	@include font-size(m);
	@include font-weight(extraBold);
	color: palette(primary, 500);
	transition: color $o-bubbles-transition-speed linear;
}


.o-bubbles__link:hover {
	.o-bubbles__icon {
		background-position: 0 100%;

		svg {
			transform: scale(0.8);
		}
		&::before {
			transform: scale(1.05);
		}
		&::after {
			transform: scale(0.83);
			opacity: 1;
		}
	}
	.o-bubbles__title {
		color: palette(secondary, 500);
	}
}