/* Buttons - Button and link-button styling with variants */

a.button svg
{
	block-size: 1cap;
}

a.button, button
{
	--button-padding: 0.7em 1.2em;
	--button-gap: 0.1em;
	--button-bg: light-dark(var(--uchu-yin-8), var(--uchu-yin-7));
	--button-color: light-dark(var(--uchu-yang), var(--uchu-yin-1));
	--button-hover-bg: light-dark(var(--uchu-green-6), var(--uchu-green-5));
	--button-hover-color: light-dark(#ffffff, #ffffff);
	--button-border-width: 3px;
	--button-border-style: solid;
	--button-border-color: var(--button-bg);
	--button-radius: 2em;
	display: inline-flex;
	align-items: center;
	gap: var(--button-gap);
	padding: var(--button-padding);
	background: var(--button-bg);
	color: var(--button-color);
	border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
	border-radius: var(--button-radius);
	text-decoration: none;
	text-box-trim: cap;
	font-weight: var(--button-font-weight, 700);
	font-size: var(--button-font-size, 1em);
	letter-spacing: 0.05ch;
	font-family: sans-serif;
	line-height: 1.1;
	cursor: pointer;

	&:hover
	{
		background: var(--button-hover-bg);
		border-color: var(--button-hover-bg);
		color: var(--button-hover-color);
	}

	&:focus
	{
		outline: var(--button-outline-width, var(--button-border-width)) var(--button-outline-style, var(--button-border-style)) var(--button-outline-color, var(--button-border-color));
		outline-offset: var(--button-outline-offset, calc(var(--button-border-width) * 2));
	}

	&:active
	{
		transform: scale(98%);
	}

	& svg
	{
		height: var(--button-icon-size, 1.5cap);
		width: auto;
		flex: none;
	}

	&[data-button-variant="primary"]
	{
		--button-bg: light-dark(var(--uchu-yellow-4), var(--uchu-yellow-5));
		--button-color: light-dark(var(--uchu-yin-8), var(--uchu-yin-9));
		--button-border-color: currentColor;
		--button-hover-bg: light-dark(var(--uchu-yellow-5), var(--uchu-yellow-4));
		--button-hover-color: light-dark(var(--uchu-yin-8), var(--uchu-yin-9));
	}

	&[data-button-variant="positive"]
	{
		--button-bg: light-dark(var(--uchu-green-6), var(--uchu-green-5));
		--button-border-color: light-dark(var(--uchu-green-8), var(--uchu-green-7));
		--button-hover-bg: light-dark(var(--uchu-green-5), var(--uchu-green-4));
	}

	&[data-button-variant="negative"]
	{
		--button-bg: light-dark(var(--uchu-red-5), var(--uchu-red-4));
		--button-border-color: light-dark(var(--uchu-red-7), var(--uchu-red-6));
		--button-hover-bg: light-dark(var(--uchu-red-4), var(--uchu-red-3));
	}

	&[data-button-variant="ghost"]
	{
		--button-bg: transparent;
		--button-border-color: light-dark(var(--uchu-yin-7), var(--uchu-yin-4));
		--button-color: light-dark(var(--uchu-yin-7), var(--uchu-yin-3));
	}

    &[data-button-variant="naked"] 
    {
        --button-bg: transparent;
        --button-border-color: transparent; 
        --button-color: light-dark(var(--uchu-yin-7), var(--uchu-yin-3));
        
        --button-hover-bg: light-dark(var(--uchu-yin-7), var(--uchu-yin-3));
        --button-hover-color: light-dark(var(--uchu-yin-8), var(--uchu-yin-9));
        --button-hover-border-color: light-dark(var(--uchu-yin-7), var(--uchu-yin-4));
    }
}