/**
 * Frontend Styles
 */
@import "./variables";
@import "./pills";
@import "./radio";

// Tabs buttons.
.ghostkit-tabs-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gkt-tabs--buttons__gap);
	margin-bottom: var(--gkt-tabs--buttons__offset);
	border-bottom: var(--gkt-tabs--button__border-width) solid var(--gkt-tabs--button__border-color);

	// Align.
	&-align-start {
		justify-content: flex-start;
	}

	&-align-center {
		justify-content: center;
	}

	&-align-end {
		justify-content: flex-end;
	}

	&-align-stretch > .ghostkit-tabs-buttons-item {
		flex-basis: 0;
		flex-grow: 1;
		text-align: center;
	}

	// Items.
	&-item {
		padding: var(--gkt-tabs--button__padding-v) var(--gkt-tabs--button__padding-h);
		margin-bottom: calc(-1 * var(--gkt-tabs--button__border-width));
		font: inherit;
		font-size: var(--gkt-tabs--button__font-size);
		font-weight: var(--gkt-tabs--button__font-weight);
		color: inherit;
		text-decoration: none;
		background-color: transparent;
		text-align: left;
		border: var(--gkt-tabs--button__border-width) solid transparent;
		border-top-left-radius: var(--gkt-tabs--button__border-radius);
		border-top-right-radius: var(--gkt-tabs--button__border-radius);
		cursor: var(--gkt-tabs--button__cursor);
		opacity: var(--gkt-tabs--button__opacity);
		transition: var(--gkt-tabs__transition-duration) border-color var(--gkt-tabs__transition-easing), var(--gkt-tabs__transition-duration) background-color var(--gkt-tabs__transition-easing), var(--gkt-tabs__transition-duration) opacity var(--gkt-tabs__transition-easing);

		&:hover,
		&:focus {
			opacity: var(--gkt-tabs--button-active__opacity);
		}
	}

	&-item-active {
		background-color: var(--gkt-tabs--button-active__background-color);
		border-color: var(--gkt-tabs--button__border-color);
		border-bottom-color: transparent;
		opacity: var(--gkt-tabs--button-active__opacity);
	}
}

// Content.
.ghostkit-tabs-content {
	position: relative;
}

// Tab.
.ghostkit-tab {
	display: none;

	&-active {
		display: block;
	}
}

// Vertical tabs
@include media-breakpoint-up(md) {
	.ghostkit-tabs-buttons-vertical {
		display: flex;

		.ghostkit-tabs-buttons {
			@include make-col(3, 10);

			flex-direction: column;
			margin-bottom: 0;
			border-right: var(--gkt-tabs--button__border-width) solid var(--gkt-tabs--button__border-color);
			border-bottom: none;

			// Items.
			&-item {
				display: block;
				margin-right: calc(-1 * var(--gkt-tabs--button__border-width));
				margin-bottom: 0;
				border-top-left-radius: var(--gkt-tabs--button__border-radius);
				border-top-right-radius: 0;
				border-bottom-left-radius: var(--gkt-tabs--button__border-radius);

				&:hover,
				&:focus {
					opacity: var(--gkt-tabs--button-active__opacity);
				}
			}

			&-item-active {
				background-color: var(--gkt-tabs--button-active__background-color);
				border-color: var(--gkt-tabs--button__border-color);
				border-right-color: transparent;
				border-bottom: var(--gkt-tabs--button__border-width) solid var(--gkt-tabs--button__border-color);
				opacity: var(--gkt-tabs--button-active__opacity);
			}
		}

		.ghostkit-tabs-content {
			@include make-col(7, 10);

			padding-left: var(--gkt-tabs--buttons__offset);
		}
	}
}