@use "sass:color";
@use "../../scss/functions/rem";
@use "../../scss/mixins/ui";
@use "../../scss/mixins/breakpoints";
@use "../../scss/typography";
@use "../../scss/variables/colors";

.jp-support-card {

	@include ui.dashboard-card-shadow;

	margin-top: rem.convert(16px);
	margin-bottom: 0;
}

.jp-support-card__description {
	font-size: typography.$font-body-small;
	line-height: 1.65;

	&:first-of-type {
		margin-top: 4px;
	}

	&:last-of-type {
		margin-bottom: 0;
		margin-top: 24px;
	}

	.dops-button {
		margin: 0 16px 0 0;

		@include breakpoints.breakpoint( "<960px" ) {
			margin: 0 16px 8px 0;
		}
	}
}

.jp-support-card__link {
	font-style: italic;

	@include breakpoints.breakpoint( "<660px" ) {
		display: block;
		width: 100%;
		padding: rem.convert(10px) 0;
		border-top: 1px color.adjust(colors.$gray, $lightness: 20%, $alpha: -0.5) solid;

		&::first-letter {
			text-transform: capitalize;
		}

		&:first-of-type {
			border-top: 0;
		}
	}
}

.jp-support-card__happiness {
	margin-bottom: 0;
	display: flex;
	flex-flow: row nowrap;

	@include breakpoints.breakpoint( "<660px" ) {

		.jp-support-card__description:first-of-type {
			margin-bottom: rem.convert(16px);
		}
	}
}

.jp-support-card__social {
	background-color: color.adjust(colors.$gray, $lightness: 35%);
	padding: rem.convert(16px);

	@include breakpoints.breakpoint( "<660px" ) {
		background: colors.$white;
		margin-top: rem.convert(16px);
		padding: 0 rem.convert(16px);
	}
}

.jp-support-card__header {
	font-weight: 400;
	font-size: typography.$font-title-small;
	margin: 0;
}

.jp-support-card__happiness-contact {
	flex-shrink: 1;
	flex-grow: 1;
}

.jp-support-card .has-call-to-action {
	border-top: 1px solid var(--jp-gray);
}
