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

// Jetpack specific foldable card mods
@use "../../scss/functions/rem";

.dops-foldable-card.dops-card {

	.jp-form-settings-group.foldable-wrapper & {
		padding-right: 0;
		margin-bottom: 0;
		box-shadow: none;
	}

	&.offlinemode-disabled {

		.dops-foldable-card__summary,
		.dops-foldable-card__summary_expanded {
			width: 100px;
		}
	}

	&.is-expanded .dops-foldable-card__content {
		position: relative;
		padding-right: rem.convert(47px);
		padding-left: rem.convert(24px);
	}
}

.dops-foldable-card__main {

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

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

	@include breakpoints.breakpoint( "<480px" ) {
		flex-basis: 100%;
	}
}

.dops-foldable-card__header {

	@include breakpoints.breakpoint( "<480px" ) {
		flex-wrap: wrap;
	}
}

.dops-foldable-card__header-text {

	@include breakpoints.breakpoint( "<480px" ) {
		font-size: rem.convert(14px);
	}

	.dops-button {
		margin-left: rem.convert(8px);
	}
}

.dops-foldable-card__subheader {

	@include breakpoints.breakpoint( "<480px" ) {
		display: none;
	}
}

.dops-foldable-card.has-expanded-summary {

	.dops-foldable-card__summary,
	.dops-foldable-card__summary_expanded {

		@include breakpoints.breakpoint( "<480px" ) {
			text-align: left;
			margin-top: rem.convert(8px);
		}
	}
}
