/* style-color-palette.css（色管理用CSS）
*（色管理用CSS／使う前にある程度色を絞り込んで、「Prepros」でminifay化）
-------------------------------------- */
/* $colors1: .is-color スタイル定義用
-------------------------------------- */
$colors1: (
base: hsl(0, 0%, 100%),				//ベース色
secondary: hsl(194, 37%, 93%),	//ベース色2
//tertiary: hsl(30, 18%, 93%),	//ベース色3
text: hsl(0, 0%, 18%),					//テキスト色
text-300: hsl(0, 0%, 79%),			//#C9C9C9
text-400: hsl(0, 0%, 69%),
text-500: hsl(0, 0%, 58%),
text-600: hsl(0, 0%, 46%),
assort: #5B9CAC,								//アソート色（メイン・決定色）
assort-pl: hsl(192, 33%, 52%),	//pale（淡い色）
assort-dp: hsl(192, 33%, 44%),	//deep（濃い色）
accent: hsl(139, 100%, 27%),			//アクセント色
accent2: hsl(346, 100%, 40%),			//アクセント色2
option: hsl(177, 47%, 56%),	//任意・情報色（水色）
require: hsl(331, 100%, 64%),		//必須・注目色（赤）
warning: hsl(33, 100%, 50%),		//警告色（黄・オレンジ）
error: hsl(355, 100%, 45%),			//エラー色（赤）
red: hsl(0, 100%, 46%),	//#ff0000	//Webカラー
);

@function adjust-lightness($color, $lightness) {
	$hue: hue($color);
	$saturation: saturation($color);
	@return hsl($hue, $saturation, $lightness);
}

@mixin generate-colors($color-name, $color-value) {
	$hue: hue($color-value);
	$saturation: saturation($color-value);
	$lightness: lightness($color-value);
	$saturation-l1: if($saturation < 64%, 47%, saturation(desaturate($color-value, 17%)));
	$lightness-l1: lightness(lighten($color-value, 8%));
	$color-l1: hsl($hue, $saturation-l1, $lightness-l1);
	$lightness-d1: lightness(darken($color-value, 8%));
	$color-d1: hsl($hue, $saturation, $lightness-d1);

	--c-#{$color-name}: #{$color-value};
	--c-#{$color-name}-l1: #{$color-l1};
	--c-#{$color-name}-d1: #{$color-d1};
	--c-#{$color-name}-a0\.05: #{rgba($color-value, 0.05)};
	--c-#{$color-name}-a0\.3: #{rgba($color-value, 0.3)};
	--c-#{$color-name}-a0\.55: #{rgba($color-value, 0.55)};
	--c-#{$color-name}-a0\.7: #{rgba($color-value, 0.7)};
	--c-#{$color-name}-a0\.85: #{rgba($color-value, 0.85)};
}

:root {

	@each $color-name,
	$color-value in $colors1 {
		@include generate-colors($color-name, $color-value);
	}
}

.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box) {
	color: inherit;
	fill: inherit;
}

.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box).is-plain {
	border: none;
	border-color: var(--c-text-350, hsl(223, 0%, 74%));
	background-color: var(--c-text-150, hsl(223, 0%, 93%));
	color: inherit;
	fill: inherit;
}

.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box)[class*=is-outline] {
	border: 0.0625em solid var(--c-text-350, hsl(223, 0%, 74%));
	background-color: hsl(223, 0%, 99%);
	color: inherit;
	fill: inherit;
}

.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box).is-ghost {
	border: 0.0625em solid var(--c-text-350, hsl(223, 0%, 74%));
	background-color: transparent;
	color: inherit;
	fill: inherit;
}

@media (any-hover: hover) {
	.magique .button:is([href], [onclick], [type=button], [type=submit]):is(:hover, :focus) {
		color: var(--c-text-700, hsl(223, 0%, 34%));
		fill: var(--c-text-700, hsl(223, 0%, 34%));
		opacity: 1;
	}

	.magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain:is(:hover, :focus) {
		background-color: var(--c-text-250, hsl(223, 0%, 84%));
		color: var(--c-text-700, hsl(223, 0%, 34%));
		fill: var(--c-text-700, hsl(223, 0%, 34%));
		opacity: 1;
	}

	.magique .button:is([href], [onclick], [type=button], [type=submit])[class*=is-outline]:is(:hover, :focus) {
		background-color: var(--c-text-150, hsl(223, 0%, 93%));
		opacity: 1;
	}

	.magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost:is(:hover, :focus) {
		background-color: var(--c-text-150, hsl(223, 0%, 93%));
		opacity: 1;
	}
}


/* .link */
.magique .link {
	position: relative;
	z-index: 10;
	line-height: 1;
	padding-bottom: 5px;
	border: 0;
	color: var(--c-cassis);
	fill: var(--c-cassis);
	border-color: var(--c-cassis);
}

.magique .link::before {
	content: "";
	z-index: -1;
	position: absolute;
	bottom: 0px;
	right: 0px;
	left: 0px;
	margin: auto;
	width: 100%;
	border-bottom: 1px solid;
	border-color: inherit;
}

/* :hover */
@media (any-hover: hover) {
	.magique .link:is([href], [onclick], [type=button], [type=submit]):is(:hover, :focus) {
		color: var(--c-cassis-l1);
		fill: var(--c-cassis-l1);
		border-color: var(--c-cassis-l1);
	}

	.magique .link:is([href], [onclick], [type=button], [type=submit]):active {
		color: var(--c-cassis);
		fill: var(--c-cassis);
		border-color: var(--c-cassis);
	}
}




//:is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box)
@each $color-name,
$color-value in $colors1 {
	.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box).is-#{$color-name} {
		color: var(--c-#{$color-name});
		fill: var(--c-#{$color-name});
	}

	.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box).is-plain.is-#{$color-name} {
		border: none;
		border-color: var(--c-#{$color-name}-l1);
		background-color: var(--c-#{$color-name});
		color: #FFF;
	}

	.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box)[class*=is-outline].is-#{$color-name} {
		background-color: hsl(223, 0%, 100%);
		border: 0.0625em solid var(--c-#{$color-name});
		color: var(--c-#{$color-name});
		fill: var(--c-#{$color-name});
	}

	.magique :is(.button, .badge, .bauble, .buckle, .lamelar, .icon, .title, .caption, .box).is-ghost.is-#{$color-name} {
		background-color: transparent;
		border: 0.0625em solid var(--c-#{$color-name});
		color: var(--c-#{$color-name});
		fill: var(--c-#{$color-name});
	}

	@media (any-hover: hover) {
		.magique .button:is([href], [onclick], [type=button], [type=submit]).is-#{$color-name}:is(:hover, :focus) {
			color: var(--c-#{$color-name}-l1);
			fill: var(--c-#{$color-name}-l1);
			opacity: 1;
		}

		.magique .button:is([href], [onclick], [type=button], [type=submit]).is-plain.is-#{$color-name}:is(:hover, :focus) {
			background-color: var(--c-#{$color-name}-l1);
			color: #FFF;
			opacity: 1;
		}

		.magique .button:is([href], [onclick], [type=button], [type=submit])[class*=is-outline].is-#{$color-name}:is(:hover, :focus) {
			border-color: transparent;
			background-color: var(--c-#{$color-name});
			color: #FFF;
			opacity: 1;
		}

		.magique .button:is([href], [onclick], [type=button], [type=submit]).is-ghost.is-#{$color-name}:is(:hover, :focus) {
			background-color: var(--c-#{$color-name});
			color: #FFF;
			border-color: #FFF;
			opacity: 1;
		}
	}

	/* .link */
	.magique .link.is-#{$color-name} {
		color: var(--c-#{$color-name});
		fill: var(--c-#{$color-name});
		border-color: var(--c-#{$color-name});
	}

	/* :hover */
	@media (any-hover: hover) {
		.magique .link.is-#{$color-name}:is([href], [onclick], [type=button], [type=submit]):is(:hover, :focus) {
			color: var(--c-#{$color-name}-l1);
			fill: var(--c-#{$color-name}-l1);
			border-color: var(--c-#{$color-name}-l1);
		}

		.magique .link.is-#{$color-name}:is([href], [onclick], [type=button], [type=submit]):active {
			color: var(--c-#{$color-name});
			fill: var(--c-#{$color-name});
			border-color: var(--c-#{$color-name});
		}
	}


	/* .list */
	.magique .list.is-#{$color-name}:is([data-before], [data-before_sp], [data-before_pc], [data-cap], [data-cap_sp], [data-cap_pc], [data-helm], [data-helm_sp], [data-helm_pc])::before,
	.magique .list.is-#{$color-name}:is([data-after], [data-after_sp], [data-after_pc], [data-last], [data-last_sp], [data-last_pc], [data-tail], [data-tail_sp], [data-tail_pc])::after,
	.magique .list.is-#{$color-name}[style*="list-style"]>:is(li, dd)::before {
		color: var(--c-#{$color-name});
		fill: var(--c-#{$color-name});
	}

	.magique .list.is-#{$color-name}:is([class*="-circled"], [class*="-boxed"])[data-ini],
	.magique .list.is-#{$color-name}:is([class*="-circled"], [class*="-boxed"])::before,
	.magique .list.is-#{$color-name}:is([class*="-circled"], [class*="-boxed"])::after,
	.magique .list.is-#{$color-name}:is([style*="circled-"], [style*="boxed-"])>:is(li, dd)::before {
		border-color: var(--c-#{$color-name});
		color: var(--c-#{$color-name});
		fill: var(--c-#{$color-name});
	}

	.magique .list.is-#{$color-name}[class*="filled-"]:is([class*="-circled"], [class*="-boxed"])[data-ini],
	.magique .list.is-#{$color-name}[class*="filled-"]:is([class*="-circled"], [class*="-boxed"])::before,
	.magique .list.is-#{$color-name}[class*="filled-"]:is([class*="-circled"], [class*="-boxed"])::after,
	.magique .list.is-#{$color-name}[style*=filled-]:is([style*="circled-"], [style*="boxed-"])>:is(li, dd)::before {
		background-color: var(--c-#{$color-name});
		color: #FFF;
	}


	/* .input, .alert */
	.magique :is(.input, .alert).is-#{$color-name} {
		background-color: var(--c-#{$color-name}-50);
		border-color: var(--c-#{$color-name}-a0\.55);
	}
}