@use "variables" as *;

// ===========================================================================
// Utility classes  (w / m / p / fz)
// ---------------------------------------------------------------------------
//   Authored in rem. PC = fixed px, SP = fluid vw (via the root font-size).
//   Each utility has an SP-only variant with the `-sp` suffix that overrides
//   the base on screens <= $bp-sp. Example:
//        <div class="pt-100 pt-60-sp">   // PC 100px -> SP 60px@390
//        <p  class="fz-14 fz-16-sp">     // PC 14px  -> SP 16px@390
//   Class name = design px, value = rem(px).
// ===========================================================================

$spacing-props: (
	m: margin,
	p: padding,
);

// side suffix -> list of CSS edges to set
$spacing-sides: (
	"": ("",),
	t: ("-top",),
	r: ("-right",),
	b: ("-bottom",),
	l: ("-left",),
	x: ("-left", "-right"),
	y: ("-top", "-bottom"),
);

@mixin spacing-rules($suffix: "") {
	@each $abbr, $prop in $spacing-props {
		@each $side, $edges in $spacing-sides {
			@each $n in $spacers {
				$name: "#{$abbr}#{$side}-#{$n}#{$suffix}";
				.#{$name} {
					@each $edge in $edges {
						#{$prop}#{$edge}: rem($n);
					}
				}
			}
		}
	}
}

// font-size
@mixin fz-rules($suffix: "") {
	@each $n in $font-sizes {
		.fz-#{$n}#{$suffix} {
			font-size: rem($n);
		}
	}
}

// width
@mixin width-rules($suffix: "") {
	.w-full#{$suffix} {
		width: 100%;
	}
	.w-half#{$suffix} {
		width: 50%;
	}
	.w-auto#{$suffix} {
		width: auto;
	}
	@each $n in $spacers {
		.w-#{$n}#{$suffix} {
			width: rem($n);
		}
	}
}

// --- emit base (all viewports) ---
@include spacing-rules;
@include fz-rules;
@include width-rules;

// --- emit SP overrides (must come after the base for source-order win) ---
@include sp {
	@include spacing-rules("-sp");
	@include fz-rules("-sp");
	@include width-rules("-sp");
}

// ---------------------------------------------------------------------------
// Misc text / color helpers
// ---------------------------------------------------------------------------
.ta-center { text-align: center; }
.ta-left { text-align: left; }
.ta-right { text-align: right; }

.tc-green { color: $color-green; }
.tc-white { color: $color-white; }
.tc-text { color: $color-text; }

.bg-green { background-color: $color-green; }
.bg-tint { background-color: $color-bg-tint; }
.bg-white { background-color: $color-white; }

.ff-serif { font-family: $font-serif; }
.ff-sans { font-family: $font-sans; }

.fw-bold { font-weight: 700; }
.fw-normal { font-weight: 400; }

// PC-only line break: honour the Figma break position on PC; on SP the break is
// removed so the text folds naturally (Japanese needs no inter-word space).
// Use <br class="br-pc"> at sentence boundaries that match the 1440 design.
.br-pc {
	@include sp {
		display: none;
	}
}

// Common link hover — key color + underline (shared across the site).
.hover-line {
	transition: color 0.2s;

	&:hover {
		color: $color-green;
		text-decoration: underline;
	}
}