@use "../../scss/mixins/breakpoints";
@use "../../scss/typography";
@use "../../scss/variables/colors";
@use "sass:color";
@use "../../scss/functions/rem";

.jp-dash-section-header {
	display: flex;
	flex-wrap: wrap;
	margin: rem.convert(12px) 0 rem.convert(12px);

	@include breakpoints.breakpoint( "<660px" ) {
		margin-bottom: rem.convert(24px);
	}

	@include breakpoints.breakpoint( "<480px" ) {
		display: block;
	}

	a {
		font-size: typography.$font-body;
		font-weight: 400;
		font-style: normal;
		line-height: 24px;
		color: colors.$black;
		text-decoration: underline;

		&:hover {
			text-decoration-thickness: 3px;
		}

		&:focus {
			text-decoration-line: none;
			border-radius: 2px;
			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #000;
			outline: 3px solid transparent;
		}
	}
}

.jp-dash-section-header__label {
	flex: 1;
	white-space: nowrap;
}

.jp-dash-section-header__name {
	display: inline-block;
	margin-top: 0;
	margin-bottom: 0;
	font-size: typography.$font-title-medium;
	line-height: 32px;
	font-weight: 500;
	white-space: nowrap;
	color: colors.$black;

	@include breakpoints.breakpoint( ">480px" ) {
		display: inline-block;
	}

	// need to clean up ClassName nesting
	.jp-dash-section-header__label {

		@include breakpoints.breakpoint( "<480px" ) {
			display: inline-block;
		}
	}
}

.jp-dash-section-header__settings {
	display: inline-block;
	min-width: rem.convert(40px);
	text-align: center;
	color: color.adjust(colors.$gray, $lightness: -10%);

	&:focus {
		outline: 0;
		box-shadow: none;

		.gridicon {
			color: colors.$blue-wordpress;
		}
	}

	.gridicon {
		position: relative;
		top: 1px;
	}
}

.jp-dash-section-header__external-link {
	align-self: center;
	font-style: italic;

	@include breakpoints.breakpoint( "<660px" ) {
		margin-top: rem.convert(4px);
	}

	@include breakpoints.breakpoint( "<480px" ) {
		display: block;
		width: 100%;
		// margin-top: rem.convert( 32px );
	}
}

.jp-dash-section-header__children {
	align-self: center;

	@include breakpoints.breakpoint( "<480px" ) {
		width: 100%;
	}
}
