.wcpay-accordion {
	background: $white;
	border: $border-width solid $gray-200;
	border-radius: 8px;
	padding: $grid-unit-10;

	&.is-high-density {
		border-radius: 0;
		padding: 0;
	}

	> .wcpay-accordion__body:first-child {
		margin-top: -1px;
	}

	> .wcpay-accordion__body:last-child {
		border-bottom-width: 0;
	}
}

.wcpay-accordion + .wcpay-accordion {
	margin-top: -1px;
}

.wcpay-accordion__body {
	border-bottom: $border-width solid $gray-200;

	&.is-opened {
		padding: $grid-unit-20;
	}
}

.wcpay-accordion__body + .wcpay-accordion__body {
	margin-top: -$border-width;
}

.wcpay-accordion__body > .wcpay-accordion__body-title {
	display: block;
	padding: 0;
	font-size: inherit;
	margin-top: 0;
	margin-bottom: 0;
	transition: 0.3s background ease-in-out;
}

.wcpay-accordion__body.is-opened > .wcpay-accordion__body-title {
	$value: -1 * $grid-unit-20;
	margin: $value $value 0 $value;
}

// Hover States
.wcpay-accordion__body > .wcpay-accordion__body-title:hover {
	// Override the default button hover style
	border: none;
}

.wcpay-accordion__body-toggle.components-button {
	position: relative;
	padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
	outline: none;
	width: 100%;
	font-weight: 500;
	text-align: left;
	color: $gray-900;
	border: none;
	box-shadow: none;

	transition: 0.2s background ease-in-out;

	height: auto;

	.wcpay-accordion__title-content {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	&.is-md {
		font-size: 13px;
	}

	&.is-lg {
		font-size: 15px;
	}

	&:focus {
		box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus )
			$components-color-accent;
		border-radius: 0;
	}

	.wcpay-accordion__arrow {
		position: absolute;
		right: $grid-unit-20;
		top: 50%;
		transform: translateY( -50% );
		color: $gray-900;
		fill: currentColor;

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

	// mirror the arrow horizontally in RTL languages
	/* rtl:begin:ignore */
	body.rtl & .dashicons-arrow-right {
		transform: scaleX( -1 );
		-ms-filter: fliph;
		filter: FlipH;
		margin-top: -10px;
	}
	/* rtl:end:ignore */
}

.wcpay-accordion__subtitle {
	color: $gray-700;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}

.wcpay-accordion__icon {
	color: $gray-700;
	margin: -2px 0 -2px 6px;
}

.wcpay-accordion__body-toggle-icon {
	margin-right: -5px;
}

.wcpay-accordion__color-title {
	float: left;
	height: 19px;
}

.wcpay-accordion__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: $grid-unit-10;
	min-height: $button-size;

	select {
		// Necessary for select to respond to flexbox
		min-width: 0;
	}

	label {
		margin-right: $grid-unit-15;
		flex-shrink: 0;
		max-width: 75%;
	}

	&:empty,
	&:first-of-type {
		margin-top: 0;
	}
}

.wcpay-accordion .circle-picker {
	padding-bottom: 20px;
}
