@use "sass:math";

@include body-class(true) {

	.sui-accordion {

		.sui-accordion-item-body,
		.sui-accordion-item-content {
			font-size: 13px;
			line-height: 22px;

			.sui-accordion-body-header {
				display: block;
				font-size: 13px;
				line-height: 22px;
				font-weight: 700;
				margin: 5px 0;
			}

			.sui-box {
				&:focus,
				&:focus-within {
					border-radius: 0;
					border: none;
					box-shadow: inset 0 0 0 2px palette(blue, default);
				}
			}
		}

		// Accordion Grid
		&, &-block {

			&:not(.sui-builder-fields) {

				.sui-accordion-header,
				.sui-accordion-item-header,
				.sui-accordion-footer {
					display: flex;
					align-items: center;
					font-size: $table--text-font-size;
					line-height: $table--text-line-height;
					font-family: $font;
					font-weight: 400;
					letter-spacing: $font--letter-spacing;

					> div {
						display: flex;
						align-items: center;
						flex: 1;
						padding: 0 #{math.div($sui-gutter-md, 2) - 1px};

						&:first-child {
							padding-left: #{$sui-gutter-md - 1px};

							@include media(min-width, md) {
								padding-left: #{$sui-gutter - 1px};
							}
						}

						&:last-child {
							padding-right: #{$sui-gutter-md - 1px};

							@include media(min-width, md) {
								padding-right: #{$sui-gutter - 1px};
							}
						}

						@include media(min-width, md) {
							padding-right: #{math.div($sui-gutter, 2) - 1px};
							padding-left: #{math.div($sui-gutter, 2) - 1px};
						}
					}

					> [class^="sui-accordion-col-"] {
						flex: 0 0 auto;
					}

					// GRID
					// To guarantee accordion columns agree on size we can apply
					// below column classes based on a 12-columns grid.
					@for $i from 1 through $accordion--grid {

						.sui-accordion-col-#{$i} {
							min-width: math.div((100% * $i), $accordion--grid);
							flex-basis: math.div((100% * $i), $accordion--grid);
						}
					}
				}

				.sui-accordion-item {

					.sui-accordion-item-header {
						cursor: pointer;

						.sui-accordion-open-indicator {

							[class*="sui-icon-"] {
								transition: 0.2s linear;
							}
						}
					}

					.sui-accordion-item-body {
						display: none;
					}

					// When item is open
					&.sui-accordion-item--open {

						> .sui-accordion-item-header {

							.sui-accordion-open-indicator {

								[class*="sui-icon-"] {
									transform: rotate(180deg);
								}
							}
						}

						> .sui-accordion-item-body {
							display: block;
						}
					}
				}
			}
		}

		// DESIGN: Table (Flexbox)
		&:not(.sui-table):not(.sui-accordion-block):not(.sui-builder-fields) {
			margin: $sui-gutter-md 0;
			border: 1px solid $table--border-color;
			border-radius: $border-radius;

			.sui-accordion-header,
			.sui-accordion-item-header,
			.sui-accordion-footer {
				min-height: 40px;
				padding: 5px 0;

				@include media(min-width, md) {
					min-height: 60px;
				}
			}

			.sui-accordion-header {
				border-bottom: 1px solid $table--border-color;

				> div {
					overflow: hidden;
					color: $table--th-color;
					font-weight: bold;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				&:last-child {
					border-bottom-width: 0;
				}
			}

			.sui-accordion-item {
				border-bottom: 1px solid $table--border-color;

				.sui-accordion-item-header {
					color: $table--text-color;
					transition: 0.3s ease;

					> div span {
						flex: 0 1 auto;
					}

					[class*="sui-icon-"] {
						margin-right: 10px;
						font-size: 12px;

						&:before {
							display: block;
						}

						&.sui-icon-right {
							margin-right: 0;
							margin-left: 10px;
						}
					}

					.sui-accordion-item-title {
						color: $table--th-color;
						font-weight: 500;

						.sui-toggle {
							flex: 0 0 auto;
							align-items: flex-start;

							+ span {
								margin-left: math.div($sui-gutter-md, 2);
							}
						}

						[class*="sui-icon-"] {
							font-size: 16px;
						}

						.sui-accordion-open-indicator {

							[class*="sui-icon-"] {
								font-size: 12px;
							}
						}
					}

					.sui-accordion-open-indicator {
						align-self: flex-start;
						margin-right: 0;
						margin-left: auto;

						[class*="sui-icon-"] {
							margin: 0;
						}
					}

					.sui-tag {

						+ .sui-accordion-open-indicator {
							margin-left: 10px;

							@include media(min-width, md) {
								margin-left: 20px;
							}
						}
					}

					&:hover,
					&:focus {
						background-color: $accordion--content-bg-color;
					}
				}

				.sui-accordion-item-body {
					padding: 0 #{$sui-gutter-md - 1px} #{$sui-gutter-md - 1px};
					background-color: $accordion--content-bg-color;

					.sui-box:last-child {
						margin-bottom: 0;
					}

					@include media(min-width, md) {
						padding: 0 #{$sui-gutter - 1px} #{$sui-gutter - 1px};
					}
				}

				&:first-child {

					.sui-accordion-item-header {
						border-top-left-radius: #{$border-radius - 1px};
						border-top-right-radius: #{$border-radius - 1px};
					}
				}

				&:last-child {
					border-bottom: 0;

					.sui-accordion-item-header,
					.sui-accordion-item-body {
						border-bottom-right-radius: #{$border-radius - 1px};
						border-bottom-left-radius: #{$border-radius - 1px};
					}
				}

				// STATUS: Default
				&.sui-default {

					> .sui-accordion-item-header,
					> .sui-accordion-item-body {
						box-shadow: inset 3px 0 $gray;
					}
				}

				// STATUS: Error
				&.sui-error {

					> .sui-accordion-item-header,
					> .sui-accordion-item-body {
						box-shadow: inset 3px 0 $error;
					}
				}

				// STATUS: Warning
				&.sui-warning {

					> .sui-accordion-item-header,
					> .sui-accordion-item-body {
						box-shadow: inset 3px 0 $warning;
					}
				}

				// STATUS: Success
				&.sui-success {

					> .sui-accordion-item-header,
					> .sui-accordion-item-body {
						box-shadow: inset 3px 0 $success;
					}
				}

				// When item is open
				&.sui-accordion-item--open {

					> .sui-accordion-item-header {
						border-bottom-right-radius: 0;
						border-bottom-left-radius: 0;
						background-color: $accordion--content-bg-color;
					}
				}

				// When item is disabled
				&.sui-accordion-item--disabled {

					.sui-accordion-item-header {
						cursor: default;
						background-color: $accordion--content-bg-color;

						&, .sui-accordion-item-title {
							color: $accordion--disabled-color;
						}

						&, .sui-accordion-open-indicator {
							pointer-events: none;
						}

						.sui-toggle {
							pointer-events: initial;
						}

						.sui-circle-score svg circle:last-child {
							stroke: $accordion--disabled-icon;
						}

						[class*="sui-icon-"]:before {
							color: $accordion--disabled-icon;
						}
					}

					&.sui-error,
					&.sui-warning,
					&.sui-success {

						.sui-accordion-item-header {
							box-shadow: inset 3px 0 $accordion--disabled-icon;
						}
					}

					&.sui-accordion-item--open {

						> .sui-accordion-item-body {
							display: none;
						}
					}
				}
			}

			// Flushed accordion
			&.sui-accordion-flushed {
				margin: 0;
				border-right-width: 0;
				border-left-width: 0;
				border-radius: 0;

				&:first-child {
					border-top-width: 0;
				}

				&:last-child {
					border-bottom-width: 0;
				}

				&:not(:first-child) {

					.sui-accordion-item:first-child {

						.sui-accordion-item-header {
							border-top-left-radius: 0;
							border-top-right-radius: 0;
						}
					}
				}

				&:not(:last-child) {

					.sui-accordion-item:last-child {

						.sui-accordion-item-header,
						.sui-accordion-item-body {
							border-bottom-right-radius: 0;
							border-bottom-left-radius: 0;
						}
					}
				}

				@include media(min-width, md) {
					margin: 0;
				}
			}

			&:first-child {
				margin-top: 0;

				@include media(min-width, md) {
					margin-top: 0;
				}
			}

			&:last-child {
				margin-bottom: 0;

				@include media(min-width, md) {
					margin-bottom: 0;
				}
			}

			@include media(min-width, md) {
				margin-top: $sui-gutter;
				margin-bottom: $sui-gutter;
			}
		}

		// DESIGN: Table
		// Must use in conjunction with .sui-table on the <table> element.
		&.sui-table {

			> tbody {

				> .sui-accordion-item {
					cursor: pointer;
					transition: background-color 0.3s;

					th, td {
						transition: background-color 0.3s;

						&.sui-table-item-title .sui-toggle .sui-toggle-slider {
							margin-right: 10px;
						}

						&.sui-table-item-title .sui-accordion-open-indicator {

							[class*="sui-icon-"] {
								height: $table--text-line-height;
								line-height: $table--text-line-height;

								&:before {
									line-height: $table--text-line-height;
								}
							}
						}
					}

					.sui-accordion-open-indicator {
						float: right;
						margin-left: 10px;

						[class*="sui-icon-"] {
							display: block;
							margin-right: 0;
							font-size: 12px;
						}
					}

					&:hover,
					&:focus {
						background-color: $accordion--content-bg-color;
					}

					// Default
					&.sui-default + .sui-accordion-item-content {
						box-shadow: inset 3px 0 0 $gray;
					}

					// Error
					&.sui-error + .sui-accordion-item-content {
						box-shadow: inset 3px 0 0 $error;
					}

					// Warning
					&.sui-warning + .sui-accordion-item-content {
						box-shadow: inset 3px 0 0 $warning;
					}

					// Success
					&.sui-success + .sui-accordion-item-content {
						box-shadow: inset 3px 0 0 $success;
					}

					// When item is open
					&.sui-accordion-item--open {
						background-color: $accordion--content-bg-color;

						th, td {
							border-bottom-color: transparent;
						}

						.sui-accordion-open-indicator [class*="sui-icon-"] {
							transform: rotate(180deg);
						}

						+ .sui-accordion-item-content {
							display: table-row;
							position: relative;
							visibility: visible;
							z-index: 0;
						}
					}

					// When item is disabled
					&.sui-accordion-item--disabled {
						pointer-events: none;
						background-color: $accordion--content-bg-color;

						th, td {
							color: $accordion--disabled-color;

							.sui-toggle {
								pointer-events: initial;
							}

							.sui-circle-score svg circle:last-child {
								stroke: $accordion--disabled-icon;
							}

							[class*="sui-icon-"]:before {
								color: $accordion--disabled-icon;
							}
						}

						&.sui-error,
						&.sui-warning,
						&.sui-success {
							box-shadow: inset 3px 0 0 $accordion--disabled-icon;
						}

						+ .sui-accordion-item-content {
							display: none;
						}
					}
				}

				> .sui-accordion-item-content {
					visibility: hidden;
					position: absolute;
					z-index: -1;
					background-color: $accordion--content-bg-color;
					height: 0;
					overflow: hidden;

					th, td {
						padding: 0 $sui-gutter-md $sui-gutter-md;

						@include media(min-width, md) {
							padding: 0 $sui-gutter $sui-gutter;
						}
					}
				}

				// FIX:
				// Assign border radius to last group of items on table.
				// Each group is defined by:
				// .sui-accordion-item and .sui-accordion-item-content
				.sui-table-item-last {

					&.sui-accordion-item,
					&.sui-accordion-item-content {
						border-radius: 0 0 $border-radius $border-radius;
					}

					&.sui-accordion-item {

						&.sui-accordion-item--open {
							border-radius: 0;
						}
					}
				}

				// FIX:
				// Assign border radius to first row if thead doesn't exist.
				.sui-table-item-first {
					border-radius: $border-radius $border-radius 0 0;
				}
			}
		}

		// DESIGN: Blocks (Flexbox)
		&-block {

			.sui-accordion-item {
				margin: 0 0 $sui-gutter-md;
				border-radius: $border-radius;
				background-color: $accordion--block-background;
				box-shadow: 0 2px 0 0 $accordion--block-shadow;

				.sui-accordion-item-header {
					min-height: 60px;
					padding: 15px 0;
					color: $accordion--block-color;
					font-size: 13px;
					line-height: 22px;
					font-family: $font;
					letter-spacing: $font--letter-spacing;

					strong {
						margin-right: 10px;
						color: $table--th-color;
					}

					.sui-accordion-item-title {
						color: $table--th-color;
						font-size: 22px;
						line-height: 30px;
						font-family: $font;
						font-weight: bold;

						.sui-tag {

							@include media(max-width, md) {
								display: block;
								bottom: #{math.div($sui-gutter-md, 2) + 7px};
								left: #{math.div($sui-gutter-md, 2) - 1px};
								position: absolute;
							}
						}

						&.sui-trim-title {
							overflow: hidden;
							display: flex;
							align-items: center;
							text-overflow: ellipsis;
							white-space: nowrap;

							span {
								flex: 0 0 auto;
							}

							.sui-trim-text {
								overflow: hidden;
								display: block;
								flex: 0 1 auto;
								align-items: center;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}

					.sui-mobile-visible {

						@include media(min-width, md) {
							display: none;
						}
					}

					.sui-desktop-visible {

						@include media(max-width, md) {
							display: none;
						}
					}

					.sui-accordion-item-date {

						@include media(max-width, md) {
							display: none;
						}
					}

					.sui-button,
					.sui-dropdown,
					.sui-button-icon {
						margin: 0 5px;

						.sui-button-icon {
							margin: 0;
						}

						&:first-child {
							margin-left: 0;
						}

						&:last-child {
							margin-right: 0;
						}
					}

					.sui-tag {
						margin-left: 10px;

						&.sui-tag-right {
							margin-right: 10px;
							margin-left: 0;
						}
					}

					.sui-accordion-col-auto {

						&:not(:first-child) {

							@include media(max-width, md) {
								margin-top: 10px;
							}
						}

						@include media(max-width, md) {
							flex: 0 0 100%;
							justify-content: flex-end;
						}
					}

					@include media(max-width, md) {
						flex-wrap: wrap;
						position: relative;
					}

					@include media(min-width, md) {
						min-height: 90px;
					}
				}

				.sui-accordion-item-body {
					padding: 0 $sui-gutter-md $sui-gutter-md;

					.sui-accordion-item-data {
						display: flex;
						flex-wrap: wrap;
						margin: 0 -5px;
						padding: 0;

						&, li {
							border: 0;
							list-style: none;
						}

						li {
							font-size: 13px;
							line-height: 22px;
							font-family: $font;
							letter-spacing: $font--letter-spacing;
							transition: 0.3s ease;
							text-align: center;

							strong, span {
								display: block;

								@include media(min-width, md) {
									margin-right: 20px;
								}
							}

							strong {
								color: $table--th-color;
								font-weight: 500;
							}

							&[data-col="large"] {

								@include media(min-width, md) {
									min-width: 200px;
								}
							}

							&:last-child {
								margin: 0;
							}

							@include media(max-width, md) {
								min-width: 50%;
								flex: 0 0 50%;
								padding: 10px 5px;
							}

							@include media(min-width, md) {
								flex: 0 0 auto;
								margin: 0;
								padding: 0 5px;
								text-align: left;
							}
						}

						// Loading data animation when accordion opens
						&.sui-onload {

							li > * {
								display: block;
								margin-right: 0;
								background-color: palette(silver, light);
								color: transparent;

								&:first-child {
									border-radius: $border-radius $border-radius 0 0;
								}

								&:last-child {
									border-radius: 0 0 $border-radius $border-radius;
								}
							}
						}
					}

					@include media(min-width, md) {
						padding: 0 $sui-gutter $sui-gutter;
					}
				}

				&:last-child {
					margin: 0;

					@include media(min-width, md) {
						margin: 0;
					}
				}

				// When item is open
				&.sui-accordion-item--open {

					.sui-accordion-item-header {

						.sui-accordion-item-date {
							display: none;
						}
					}
				}

				@include media(min-width, md) {
					margin: 0 0 $sui-gutter;
				}
			}
		}
	}

	// FIX:
	// Improve styles of flushed accordions inside .sui-box
	.sui-box {

		.sui-box-header {

			+ .sui-accordion-flushed {
				border-top-width: 0;
			}
		}

		.sui-box-body {

			> .sui-accordion-flushed {

				&:not(.sui-accordion-block) {
					margin-right: -#{$sui-gutter-md};
					margin-left: -#{$sui-gutter-md};

					@include media(min-width, md) {
						margin-right: -#{$sui-gutter};
						margin-left: -#{$sui-gutter};
					}
				}
			}

			.sui-side-tabs .sui-tab-content {

				> .sui-accordion-flushed {

					&:not(.sui-accordion-block) {
						margin-bottom: -#{$sui-gutter-md};

						@include media(min-width, md) {
							margin-bottom: -#{$sui-gutter};
						}
					}
				}
			}
		}
	}

	// FIX:
	// Improve flushed accordions inside .sui-tabs
	.sui-tabs:not(.sui-side-tabs) {

		> [data-panes],
		> .sui-tabs-content {

			> *,
			> .sui-tab-content {

				.sui-accordion {

					&.sui-table,
					&:not(.sui-table):not(.sui-accordion-block):not(.sui-builder-fields) {

						&.sui-accordion-flushed {
							margin-right: -#{$sui-gutter-md};
							margin-left: -#{$sui-gutter-md};

							@include media(min-width, md) {
								margin-right: -#{$sui-gutter};
								margin-left: -#{$sui-gutter};
							}
						}
					}
				}
			}
		}
	}

	// FIX:
	// Improve flushed accordions inside .sui-side-tabs
	.sui-side-tabs {

		> .sui-tabs-content {

			> .sui-tab-content {

				.sui-accordion {

					&.sui-table,
					&:not(.sui-table):not(.sui-accordion-block):not(.sui-builder-fields) {

						&.sui-accordion-flushed {
							margin-right: -#{$sui-gutter-md};
							margin-left: -#{$sui-gutter-md};

							@include media(min-width, md) {
								margin-right: -#{$sui-gutter};
								margin-left: -#{$sui-gutter};
							}
						}
					}
				}
			}
		}
	}
}