@use "../../scss/functions/rem";
@use "../../scss/calypso-colors";
@use "../../scss/mixins/long-content-fade";

.dops-section-header.dops-card {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
	padding-top: rem.convert(16px);
	padding-bottom: rem.convert(15px);
	position: relative;
	border-bottom: 1px solid #dcdcde;
	margin-bottom: 0;

	&::after {
		content: "";
	}
}

.dops-section-header__label {
	display: flex;
	align-items: center;
	flex-grow: 1;
	min-width: 0; // weird fix for overflowing items
	line-height: rem.convert(30px);
	position: relative;
	color: calypso-colors.$black;
	font-size: rem.convert(20px);
	font-weight: 500;

	.dops-count {
		margin-left: rem.convert(8px);
	}
}

.dops-section-header__label-text {
	position: relative;
	margin-right: rem.convert(8px);
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	padding-right: rem.convert(8px);
	min-width: 0; // weird fix for overflowing items

	&::before {

		@include long-content-fade.long-content-fade( $size: 8px, $color : calypso-colors.$white );
	}

	.has-card-badge & {
		width: auto;
	}
}

.dops-section-header__actions {
	align-items: center;
	display: flex;
	flex-grow: 0;
	position: relative;

	.components-toggle-control {
		margin-bottom: 0;

		.components-flex {
			gap: normal;
		}
	}
}
