// =============================================================================
// :: Feedback
// =============================================================================
.c-feedback {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 1.2rem 1rem;

	box-shadow: 0 1.3rem 4rem -1rem $box-shadow-color-light;

	border: none;
	border-radius: $border-radius-2x-small;

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

// =============================================================================
// :: Elements
// =============================================================================
.c-feedback__text {
	font-size: $font-size-2x-small;
}

.c-feedback__button {
	padding: 1rem 1.2rem;

	background-color: $background-color-green;
	border: none;
	border-radius: $border-radius-2x-small;

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

	cursor: pointer;

	&:last-child {
		margin-left: 0.5rem;
	}

	&:hover {
		background-color: darken($background-color-green, 10%);

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

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

		&:last-child {
			margin-left: 1.6rem;
		}
	}
}

.c-feedback__icon {
	font-size: $font-size-base;

	color: $text-color-base;

	transition: color 0.2s ease-in-out;

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

.c-feedback__container {
	// forces the buttons on mobile to place itself in row
	display: flex;
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-feedback__button--bg-gray {
	background-color: $background-color-light;

	&:hover {
		background-color: darken($background-color-light, 30%);
	}
}