.accordion {
	display: inline-block;
	width: 100%;
	border-radius: var(--jp-border-radius);
	border: 1px solid var(--jp-gray);

	> *:not(:last-child) {
		border-bottom: 1px solid var(--jp-gray);
	}
}

.accordion-item {
	background-color: var(--jp-white);
}

.accordion-header {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	cursor: pointer;
	box-sizing: border-box;
	background: none;
	border: none;
	width: 100%;
	align-items: center;
	outline-color: var(--jp-black);
	padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3); // 16px | 24px
	text-align: start;

	>:first-of-type {
		grid-column: 1/7;
	}

	>:last-of-type {
		grid-column: 9;
	}

	>:not(:first-child) {
		margin: auto;
	}

	&:hover {
		background: var(--jp-gray-0);
	}
}

.accordion-header-label {
	display: flex;
	align-items: center;
	font-size: var(--font-body-small);
	font-weight: 400;
}

.accordion-header-label-icon {
	margin-right: var(--spacing-base); // 8px
}

.accordion-header-description {
	font-weight: 600;
	margin-left: calc(var(--spacing-base) * 4); // 32px
	margin-bottom: var(--spacing-base); // 8px
}

.accordion-header-status {
	font-size: var(--font-body-small);
	font-weight: 400;
	margin-left: calc(var(--spacing-base) * 4); // 32px
	margin-bottom: var(--spacing-base); // 8px
}

.accordion-header-status-separator {
	display: inline-block;
	height: 4px;
	margin: 2px 12px;
	width: 4px;
	background-color: var(--jp-gray-50);
}

.accordion-header-button {
	align-items: center;
}

.accordion-body {
	transform-origin: top center;
	overflow: hidden;

	&-close {
		transition: all 0.1s;
		max-height: 0;
		padding: 0;
		transform: scaleY(0);
	}

	&-open {
		transition: max-height 0.3s, transform 0.2s;
		padding: calc(var(--spacing-base) * 4) calc(var(--spacing-base) * 7); // 32 px | 56px
		max-height: 1000px;
		transform: scaleY(1);
	}
}

.icon-check {
	fill: var(--jp-green-40);
}

.status-badge {
	border-radius: 32px;
	flex-shrink: 0;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 16px;
	padding: calc(var(--spacing-base) / 2); // 4px
	position: relative;
	text-align: center;
	width: 60px;
	margin-left: calc(var(--spacing-base) * 4); // 32px

	&.fixed {
		color: var(--jp-white);
		background-color: #008a20;
	}

	&.ignored {
		color: var(--jp-white);
		background-color: var(--jp-gray-50);
	}
}

.is-fixed {
	color: #008a20;
}

.support-link {
	color: inherit;

	&:focus,
	&:hover {
		color: inherit;
		box-shadow: none;
	}
}

.icon-tooltip {
	max-height: 20px;
	margin-left: calc(var(--spacing-base) / 2); // 4px

	&__icon {
		color: var(--jp-red);
	}

	&__content {
		color: var(--jp-gray-70);
		font-weight: 400;
		line-height: 24px;
	}
}

@media ( max-width: 599px ) {

	.accordion-header {
		display: grid;
		grid-auto-rows: minmax(auto, auto);

		>:first-child {
			grid-column: 1/8;
			grid-row: 1;
		}

		>:nth-child(2) {
			padding-left: calc(var(--spacing-base) * 4); // 32px
			grid-row: 2;
		}

		>:nth-child(3) {
			grid-row: 2;
		}

		>:nth-child(3) span {
			position: absolute;
			margin-top: var(--spacing-base); // 8px
		}

		>:last-child {
			grid-column: 10;
			grid-row: 1/3;
		}
	}

	.status-badge {
		display: none;
	}
}

@media ( max-width: 1200px ) {

	.accordion-header-status {
		display: grid;
	}

	.accordion-header-status-separator {
		display: none;
	}
}
