@import "@automattic/typography/styles/variables";
@import "@wordpress/base-styles/breakpoints";

$common-border-radius: 4px;

/**
 * CSS used to transform existing Segment component to the styles used in the modernized Stats.
 */
@mixin navigation-segment-control-buttons( $segment-width: 100px ) {
	.segmented-control {
		&.is-primary {
			.segmented-control__item.is-selected {
				.segmented-control__link {
					border-color: var(--color-primary);
					background-color: var(--color-primary);

					&:hover {
						background-color: var(--color-primary);
					}
				}
			}
		}

		.segmented-control__item {
			&:first-of-type .segmented-control__link {
				border-top-left-radius: 4px;
				border-bottom-left-radius: 4px;
			}

			&:last-of-type .segmented-control__link {
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
			}
		}

		.segmented-control__text {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.segmented-control__link {
		font-weight: 500;
		line-height: 20px;
		color: var(--studio-black);
		width: $segment-width;
		box-sizing: border-box;

		@media (max-width: $break-mobile) {
			width: auto;
		}
	}

	// Make the content break line earlier than 660px
	@media (max-width: $break-large) {
		.segmented-control {
			width: 100%;
		}

		.segmented-control__link {
			width: unset;
		}
	}
}

/*
 * Align a header and its sibling in one row by applying a flexbox and padding.
 */
@mixin section-header-with-siblings {
	flex: 1;
	min-width: 320px;
	padding: 0 24px 0 0;
	margin: 0;

	@media (max-width: $break-mobile) {
		margin: 16px 0;
		min-width: unset;
	}
}

/**
 * Used to style the segmented controls in the comments module and subscribers module.
 */
@mixin segmented-controls {
	.segmented-control {
		.segmented-control__link {
			padding: 6px 8px;
			font-weight: 500;
			line-height: 20px;
			color: var(--studio-black);

			&:focus {
				outline: none;
			}
		}

		.segmented-control__item {
			&:not(:first-of-type) {
				margin-left: -1px;
			}

			&.is-selected {
				.segmented-control__link {
					background-color: var(--color-primary);
					border-color: var(--color-primary);
					color: var(--studio-white);
					position: relative;
					z-index: 1;
				}
			}

			&:first-of-type .segmented-control__link {
				border-top-left-radius: $common-border-radius;
				border-bottom-left-radius: $common-border-radius;
				border-right: 0;
			}

			&:last-of-type .segmented-control__link {
				border-top-right-radius: $common-border-radius;
				border-bottom-right-radius: $common-border-radius;
			}
		}

		@media (max-width: 660px) {
			margin-top: 16px;

			.segmented-control__link {
				padding: 6px 26px;
			}
		}
	}
}
