@use "@gloria/a11y/_mixins.scss" as *;

.c-button {
	display: inline-flex;
	margin: 0;
	padding: var(--spacing-2) var(--spacing-4);
	flex-direction: row;
	align-items: center;
	border-radius: var(--radius-1);
	cursor: pointer;
	user-select: none;
	vertical-align: middle;
	appearance: none;
	background: transparent;
	border: none;
	outline: none;
	color: inherit;
	font-family: inherit;
	text-decoration: none;
	text-align: center;

	@include a11y-keyboard-focus-ring( true, false,
		background-color var(--duration-normal) var(--cbuc-cubic-out),
		color var(--duration-normal) var(--cbuc-cubic-out)
	);

	&.is-block {
		display: flex;
	}

	&[disabled] {
		cursor: not-allowed;
		pointer-events: none;
	}

	&--xs {
		height: 24px;
		font-size: var(--font-size-xs);
		line-height: var(--line-height-xs);
	}

	&--sm {
		height: 32px;
		font-size: var(--font-size-sm);
		line-height: var(--line-height-xs);
	}

	&--base {
		height: 40px;
		font-size: var(--font-size-base);
		line-height: var(--line-height-xs);
	}

	&--lg {
		height: 48px;
		font-size: var(--font-size-lg);
		line-height: var(--line-height-xs);
	}

	&--square {
		justify-content: center;
		padding: var(--spacing-2);
		aspect-ratio: 1;
		min-width: 40px;

		& .c-icon {
			width: var(--font-size-base);
			height: var(--font-size-base);
		}
	}

	&--rounded {
		border-radius: var(--radius-full);
	}

	&--primary {
		border: 1px solid var(--color-primary-500);
		background-color: var(--color-primary-500);
		color: var(--color-common-white);
		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.043);

		&.is-active,
		&:hover {
			background-color: var(--color-primary-600);
		}

		&:active {
			background-color: var(--color-primary-700);
		}

		&[disabled] {
			&,
			&:hover,
			&:active {
				background-color: var(--color-secondary-light-disabled);
				color: var(--color-text-disabled);
				border: 1px solid var(--color-secondary-light-disabled);
			}
		}
	}

	&--secondary {
		color: var(--color-primary-500);
		background-color: var(--color-common-white);
		border: 1px solid var(--color-primary-500);
		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);

		&.is-active,
		&:hover {
			background-color: var(--color-primary-100);
		}

		&:active {
			background-color: var(--color-primary-200);
		}

		&[disabled] {
			&,
			&:hover,
			&:active {
				background-color: var(--color-secondary-100-disabled);
				color: var(--color-secondary-400);
				border: 1px solid var(--color-secondary-100-disabled);
			}
		}
	}

	&--toolbar {
		color: var(--color-text-secondary);
		border: 1px solid rgba(41, 52, 64, 0.2);
		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);
		padding: var(--spacing-2) var(--spacing-3);

		& .c-icon {
			color: var(--color-fill-custom, --color-from-parameter);
		}

		&.is-active,
		&:hover {
			background-color: rgba(41, 52, 64, 0.08);
			border: 1px solid rgba(41, 52, 64, 0.2);
		}

		&:active {
			color: var(--color-text-primary);
			background-color: rgba(41, 52, 64, 0.16);
			border: 1px solid rgba(41, 52, 64, 0.3);
		}

		&[disabled] {
			&,
			&:hover,
			&:active {
				background-color: var(--color-secondary-100-disabled);
				color: var(--color-secondary-400);
				border: 1px solid var(--color-secondary-100-disabled);
			}
		}
	}

	&--transparent {
		color: var(--color-fill-custom, --color-from-parameter);

		&.is-active,
		&:hover,
		&:active {
			color: var(--color-primary-500);
		}

		&[disabled] {

			&,
			&:hover,
			&:active {
				color: var(--color-secondary-light-disabled);
			}
		}
	}

	&--small-padding {
		padding: var(--spacing-1) var(--spacing-2);
	}
}
