@use "../../scss/mixins/breakpoints";
@use "../../scss/functions/rem";

.jp-form-settings-card {
	margin-bottom: rem.convert(24px);
	font-size: rem.convert(14px);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
	border-radius: rem.convert(4px);

	+ .jp-at-a-glance__stats-card {
		margin-bottom: rem.convert(24px);
	}

	> :first-child {
		border-top-left-radius: rem.convert(4px);
		border-top-right-radius: rem.convert(4px);
	}

	> :last-child {
		border-bottom-left-radius: rem.convert(4px);
		border-bottom-right-radius: rem.convert(4px);
	}

	.jp-settings-card__configure-link {
		display: flex;
		margin-bottom: 0;

		&:last-child {
			border-top: 1px solid var(--jp-gray);
		}
	}

	.dops-card {
		box-shadow: none;
		padding: rem.convert(16px) rem.convert(24px);

		&::after {
			display: none;
		}

		p:last-child {
			margin-bottom: 0;
		}
	}

	.jp-form-settings-group + .dops-card.is-card-link {
		border-top: 1px solid var(--jp-gray);
	}

	.dops-notice {
		margin-bottom: 0;

		&,
		.dops-notice__icon-wrapper {
			border-radius: 0;
		}

		.dops-notice__text {

			&,
			a {
				color: var(--jp-white);
			}
		}
	}

	.dops-card.is-card-link + .jp-form-settings-group {
		border-top: 1px solid var(--jp-gray);
	}

	.dops-banner.dops-card.is-card-link {
		padding: rem.convert(24px);
		align-items: center;

		&:hover {
			box-shadow: none;

			.dops-banner__title {
				text-decoration: underline;
			}

			.dops-card__link-indicator {
				color: #000;
			}
		}
	}

	.dops-foldable-card {
		padding: 0;
		border-top: 1px solid var(--jp-gray);

		.dops-foldable-card__header {
			padding: rem.convert(24px);
			min-height: unset;
		}

		.form-toggle__switch {
			float: left;
			margin-top: rem.convert(2px);
		}

		.dops-foldable-card__header-text {
			font-size: rem.convert(14px);
		}

		&.jp-foldable-settings-disable .dops-foldable-card__header {
			color: var(--jp-gray);
		}

		.dops-foldable-card__content {
			padding: rem.convert(16px) rem.convert(24px);
			border-top: 1px solid var(--jp-gray);
		}

		.dops-foldable-card__main {

			@include breakpoints.breakpoint( ">480px" ) {
				max-width: 85%;
			}
		}

		.jp-support-info {
			right: rem.convert(-21px);
			top: rem.convert(7px);

			@include breakpoints.breakpoint( "<480px" ) {
				right: rem.convert(-30px);
			}
		}

		.jp-form-legend:first-child,
		.jp-form-label-wide:first-child {
			padding-top: rem.convert(7px);
		}

		.dops-foldable-card__expand {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 72px;

			.gridicon {
				fill: var(--jp-black);
				width: rem.convert(16px);
				height: rem.convert(16px);
			}
		}
	}

	// flush with section header's bottom border
	.dops-foldable-card:first-child,
	.dops-section-header + .dops-foldable-card,
	.dops-section-header + .dops-card.dops-banner {
		border-top: none;
	}

	a.dops-card .dops-card__link-indicator {
		color: #1e1e1e;
		width: rem.convert(18px);
		flex-shrink: 0;
		margin-left: auto;

		&:hover {
			color: var(--jp-black);
		}
	}

}

.jp-foldable-settings-standalone {

	.dops-foldable-card__header-text {
		font-size: rem.convert(14px);
	}

	@include breakpoints.breakpoint( ">480px" ) {

		.dops-foldable-card__action {
			right: rem.convert(10px);
		}

		.jp-form-settings-group .jp-support-info {
			right: rem.convert(2px);
			top: 0;
		}
	}

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

		.jp-form-settings-group .jp-support-info {
			right: rem.convert(-31px);
			top: rem.convert(6px);
		}
	}
}

.jp-banner__no-border {
	border-left: none !important;

	.dops-banner__icon-circle {
		background: none !important;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		svg.gridicon {
			width: 20px;
			height: 20px;

			&.gridicons-info {
				color: var(--jp-black);
			}

			&.gridicons-notice {
				color: var(--jp-yellow-30);
			}

			&.gridicons-checkmark-circle {
				color: var(--jp-green-40);
			}
		}
	}

	.dops-banner__title
	.dops-banner__description {
		font-size: rem.convert(14px);
		line-height: rem.convert(24px);
		color: var(--jp-black-80);
	}

	.dops-banner__title {
		font-weight: 700;
	}

	.dops-banner__description {
		margin-top: 0;
	}
}
