/* ****************************************************************************
 * COMPONENTS: ACCORDIONS
 */

@import "../common/mixins";

.wpmud .sui-accordion {

	.sui-accordion-item {
		&.sui-dismissed td:first-child {
			border-left: 2px solid #AAAAAA;
		}
		.sui-table tbody {
			.sui-accordion-open-indicator [class*="sui-icon-"] {
				display: inline-block;
			}
		}

		&.sui-accordion-item--disabled {
			.sui-accordion-item-header {
				pointer-events: auto !important;
			}
		}

		.sui-accordion-item-title {
			&.justify-content-start {
				justify-content: flex-start;
				button.sui-tooltip {
					&:hover {
						background: none;
					}
					&.sui-button-icon {
						.sui-icon-info {
							font-size: 12px !important;
							margin: 0 !important;
							&:before {
								color: #888 !important;
							}
						}
					}
				}
			}
		}
	}

	.sui-accordion-item-body .sui-box-body {
		p, span:not([class*="sui-icon-"]):not([class*="sui-tag-"]):not([class*="select2-"]), li { color: #888 !important; }
		[class*="sui-icon-"] { margin-right: 7px; }

		ol {
			margin-left: 13px;
			.wphb-upsell-performance-row { margin-left: -43px; }
		}

		h4 {
			font-size: 13px;
			line-height: 22px;
			&:not(:first-of-type) { margin-top: 30px; }
		}

		a.wphb-button-link {
			display: block;
			font-size: 12px;
			text-transform: uppercase;
			margin-bottom: 10px;
			margin-top: -5px;
		}

		/* SUI overwrite */
		.sui-notice {
			p { margin: 0 0 10px; }
			p:last-child { margin: 0; }
		}

		.sui-code-snippet {
			margin-bottom: 10px;
			padding: 20px 30px;
			letter-spacing: -1px;
			line-height: 22px;
		}

		table th, td {
			text-align: right !important;
			width: 100px;
			overflow-wrap: break-word;

			@include bp(phone) { width: 50px; }
			a { font-weight: 400; }

			&:first-of-type {
				text-align: left !important;
				width: 100%;
			}
		}

		.wphb-upsell-performance-row {
			display: flex;
			align-items: center;
			margin: 15px -30px 0 -30px;
			padding: 20px 30px 0;
			background-color: #FAFAFA;

			@include bp(phone) {
				margin-top: 0;
				padding-top: 0;
			}

			&.wphb-negative-margin {
				margin-bottom: -30px;
			}

			.sui-upsell-image {
				width: 150px;
				margin-right: 30px;
				@include bp(phone) { display: none; }
			}
		}
	}

	.sui-accordion-item-header {
		div:nth-child(2) { justify-content: center; }
		div:last-of-type { justify-content: flex-end; }
	}
}

// Configs page accordion item override description css.
#wrap-wphb-configs {
	.sui-accordion-item-header {
		div:nth-child(2) { justify-content: left; }
	}
}
