/* ------------------------------------------------------------ *\
	Tabs
\* ------------------------------------------------------------ */

.tabs-wrapper { background: #fff;

	.tabs { margin: 0; list-style: none outside none; border: 1px solid #ececec;

		.tabs-title { float: left; font-weight: 900; text-transform: uppercase;
			& + .tabs-title { border-left: 1px solid #ececec; }
			&:last-child { border-right: 1px solid #ececec; }

			a { display: block; color: $color-dark; font-size: 13px; outline: none; background: #fff; }
			&.is-active a { margin-bottom: -1px; border-bottom: 1px solid #fff; }
			.fa, .fab, .fas, .far { font-size: 16px; color: $color-orange; margin-right: 7px;}

		}
	}

	.tabs-content {
		.content { padding: 19px 30px 35px; border-width: 0 1px 1px; border-style: solid; border-color: #ececec; }
	}

	.stripe-cards {
		max-height: 35px;
		margin-top: 22px;
	}

	/*  Mobile  */

	@media (max-width: $breakpoint-mobile) {
		.tabs {
			.tabs-title + .tabs-title { border-left: 0; border-top: 1px solid #ececec; }
			.tabs-title { float: none; line-height: 40px;

				a { padding: 20px 15px; }
				&.is-active a { background: #fafafa; }
			}
		}

		.tabs-content {
			.content { padding: 15px; }
		}

		.stripe-cards {
			margin-bottom: 20px;
			margin-top: 0px;
		}
	}
}
