hensei-web/src/lib/components/ui/button/button.module.scss

@use 'sass:color';
@use 'themes/spacing';
@use 'themes/mixins';
@use 'themes/colors';
@use 'themes/typography';
@use 'themes/effects';
@use 'themes/layout';

.button {
	align-items: center;
	background: var(--button-bg);
	border: 2px solid transparent;
	border-radius: layout.$input-corner;
	color: var(--button-text);
	display: inline-flex;
	font-size: typography.$font-button;
	font-weight: typography.$normal;
	justify-content: center;
	gap: 6px;
	transition: 0.18s opacity ease-in-out;
	user-select: none;
	transition:
		background-color 0.18s ease-out,
		color 0.18s ease-out;
	cursor: pointer;
	outline: none;
	position: relative;
	white-space: nowrap;
	text-decoration: none;
	line-height: 1;

	.text {
		align-items: center;
		color: inherit;
		display: flex;
	}

	&:hover,
	&.blended:hover,
	&.blended.active {
		background: var(--button-bg-hover);
		cursor: pointer;
		color: var(--button-text-hover);

		.accessory svg {
			fill: var(--button-text-hover);
		}

		.accessory svg.stroke {
			fill: none;
			stroke: var(--button-text-hover);
		}
	}

	&:disabled {
		background-color: var(--button-bg-disabled);
		color: var(--button-text-disabled);
		cursor: not-allowed;
		opacity: 0.5;

		&:hover {
			background-color: var(--button-bg-disabled);
			color: var(--button-text-disabled);
			cursor: not-allowed;
		}
	}

	&:focus-visible {
		border: 2px solid colors.$blue;
		outline: none;
	}

	&:active:not(:disabled) {
		transform: translateY(1px);
	}
}

// Variants
.primary {
	background-color: var(--button-contained-bg);
	color: var(--button-text);

	&:hover:not(:disabled) {
		background-color: var(--button-contained-bg-hover);
	}
}

.secondary {
	background-color: var(--button-bg);
	color: var(--button-text);
	border: 1px solid var(--separator-bg);

	&:hover:not(:disabled) {
		background-color: var(--button-bg-hover);
		color: var(--button-text-hover);
	}
}

.ghost {
	background-color: transparent;
	color: var(--text-secondary);

	&:hover:not(:disabled) {
		background-color: var(--button-bg);
		color: var(--text-primary);
	}
}

.text {
	background-color: transparent;
	color: var(--accent-blue);
	padding: 0;
	min-height: auto;

	&:hover:not(:disabled) {
		color: var(--accent-blue-focus);
		text-decoration: underline;
	}

	&:active:not(:disabled) {
		transform: none;
	}
}

.blended {
	background: transparent;

	&:hover:not(:disabled) {
		background: var(--button-bg-hover);
	}
}

.bound {
	background: var(--button-contained-bg);

	&:hover:not(:disabled) {
		background: var(--button-contained-bg-hover);
	}

	&.save:hover .accessory svg {
		fill: colors.$save-red;
		stroke: colors.$save-red;
	}

	&.save {
		color: colors.$save-red;

		&.active .accessory svg {
			fill: colors.$save-red;
			stroke: colors.$save-red;
		}

		&:hover {
			color: color.adjust(colors.$save-red, $lightness: -30%);

			.accessory svg {
				fill: color.adjust(colors.$save-red, $lightness: -30%);
				stroke: color.adjust(colors.$save-red, $lightness: -30%);
			}
		}
	}
}

.bound.blended {
	background: var(--dialog-bg);

	&:hover:not(:disabled) {
		background: var(--input-bound-bg);
	}
}

.floating {
	pointer-events: none;
	position: absolute;
	opacity: 0;
	z-index: 99;
}

.destructive {
	background: colors.$error;
	color: white;

	&:hover:not(:disabled) {
		background: color.adjust(colors.$error, $lightness: -15%);
	}

	@include mixins.breakpoint(phone) {
		background: colors.$error;
		color: colors.$grey-100;

		.accessory svg {
			fill: colors.$grey-100;
		}
	}
}

.notice {
	background-color: var(--notice-button-bg);
	color: var(--notice-button-text);

	&:hover:not(:disabled) {
		background-color: var(--notice-button-bg-hover);
	}
}

.modal {
	&:hover:not(:disabled) {
		background: colors.$grey-90;
	}

	&.destructive {
		color: colors.$error;

		&:hover:not(:disabled) {
			color: color.adjust(colors.$error, $lightness: -10%);
		}
	}
}

// Modifiers
.full {
	width: 100%;
}

.fullWidth {
	width: 100%;
}

.grow {
	flex-grow: 1;
}

.no-shrink {
	flex-shrink: 0;
}

.active {
	background: var(--button-bg-hover);
	color: var(--button-text-hover);
}

// Sizes
.icon {
	aspect-ratio: 1 / 1;
	padding: spacing.$unit * 1.5;
	height: 44px;
	width: 44px;

	.text {
		display: none;

		@include mixins.breakpoint(tablet) {
			display: block;
		}

		@include mixins.breakpoint(phone) {
			display: block;
		}
	}
}

.small {
	padding: spacing.$unit spacing.$unit-2x;
	font-size: typography.$font-small;
	min-height: 28px;

	&.iconOnly {
		padding: spacing.$unit;
		width: 28px;
		height: 28px;
	}
}

.medium {
	height: spacing.$unit * 5.5;
	padding: (spacing.$unit * 1.5) spacing.$unit-2x;
	font-size: typography.$font-regular;

	&.iconOnly {
		padding: spacing.$unit * 1.5;
		width: 44px;
		height: 44px;
	}
}

.large {
	font-size: typography.$font-large;
	padding: spacing.$unit-2x spacing.$unit-3x;
	min-height: 52px;

	&.iconOnly {
		padding: spacing.$unit-2x;
		width: 52px;
		height: 52px;
	}
}

// Special features
.save {
	.accessory svg {
		fill: none;
		stroke: var(--button-text);
	}

	&.saved {
		color: colors.$save-red;

		.accessory svg {
			fill: colors.$save-red;
			stroke: colors.$save-red;
		}

		&:hover:not(:disabled) {
			color: colors.$save-red;

			.accessory svg {
				fill: none;
				stroke: colors.$save-red;
			}
		}
	}

	&:hover:not(:disabled) {
		color: colors.$save-red;

		.accessory svg {
			fill: colors.$save-red;
			stroke: colors.$save-red;
		}
	}
}

// Element colors
.wind {
	background: var(--wind-bg);
	color: var(--wind-text-contrast);

	&:hover:not(:disabled) {
		background: var(--wind-bg-hover);
		color: var(--wind-text-hover);
	}
}

.fire {
	background: var(--fire-bg);
	color: var(--fire-text-contrast);

	&:hover:not(:disabled) {
		background: var(--fire-bg-hover);
		color: var(--fire-text-hover);
	}
}

.water {
	background: var(--water-bg);
	color: var(--water-text-contrast);

	&:hover:not(:disabled) {
		background: var(--water-bg-hover);
		color: var(--water-text-hover);
	}
}

.earth {
	background: var(--earth-bg);
	color: var(--earth-text-contrast);

	&:hover:not(:disabled) {
		background: var(--earth-bg-hover);
		color: var(--earth-text-hover);
	}
}

.dark {
	background: var(--dark-bg);
	color: var(--dark-text-contrast);

	&:hover:not(:disabled) {
		background: var(--dark-bg-hover);
		color: var(--dark-text-hover);
	}
}

.light {
	background: var(--light-bg);
	color: var(--light-text-contrast);

	&:hover:not(:disabled) {
		background: var(--light-bg-hover);
		color: var(--light-text-hover);
	}
}

// Icon-only specific
.iconOnly {
	gap: 0;
	aspect-ratio: 1;
}

// Accessories
.accessory {
	$dimension: spacing.$unit-2x;

	display: flex;
	align-items: center;

	&.arrow {
		margin-top: spacing.$unit-half;
	}

	&.flipped {
		transform: rotate(180deg);
	}

	svg {
		fill: var(--button-text);
		height: $dimension;
		width: $dimension;

		&.stroke {
			fill: none;
			stroke: var(--button-text);
		}

		&.Add {
			height: 18px;
			width: 18px;
		}

		&.Check {
			height: 22px;
			width: 22px;
		}
	}

	&.check svg {
		margin-top: 1px;
		height: 14px;
		width: auto;
	}

	&.settings svg {
		height: 13px;
		width: 13px;
	}
}

// CSS modules workaround for floating button behavior
:global(.unit:hover) .floating,
:global(.unit) .floating.active {
	pointer-events: initial;
	opacity: 1;
}