// =============================================================================
// :: Settings
// =============================================================================
$buttonSize: 4.5rem;

// =============================================================================
// :: Question
// =============================================================================
.c-question {
	padding: 1.5rem 1.5rem 1.5rem 2rem;

	background-color: $background-color-base;
	border-radius: $border-radius-base;
	box-shadow: 0 1.3rem 4rem -1rem $box-shadow-color-light;
}

// =============================================================================
// :: Elements
// =============================================================================
.c-question__wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.c-question__input {
	flex-grow: 1;

	height: 100%;

	font-family: $font-family-primary;

	color: $text-color-base;

	border: none;
	outline: none;

	&::placeholder {
		font-size: $font-size-2x-small;
		font-family: $font-family-primary;

		color: $text-color-base;

		@include respond-at(get-breakpoint("mobile")) {
			font-size: $font-size-base;
		}
	}
}

.c-question__button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: $buttonSize;
	height: $buttonSize;

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

	cursor: pointer;

	&:hover {

		.c-question__icon {
			transform: rotate(360deg);
		}
	}
}

.c-question__icon {
	padding-right: 0.5rem;

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

	color: $text-color-light;

	transition: transform 0.3s ease-in-out;
}