[color=default] {
	--smoothly-color: var(--smoothly-default-color);
	--smoothly-color-contrast: var(--smoothly-default-contrast);
	--smoothly-color-shade: var(--smoothly-default-shade);
	--smoothly-color-tint: var(--smoothly-default-tint);
}

[color=primary] {
	--smoothly-color: var(--smoothly-primary-color);
	--smoothly-color-contrast: var(--smoothly-primary-contrast);
	--smoothly-color-shade: var(--smoothly-primary-shade);
	--smoothly-color-tint: var(--smoothly-primary-tint);
}

[color=secondary] {
	--smoothly-color: var(--smoothly-secondary-color);
	--smoothly-color-contrast: var(--smoothly-secondary-contrast);
	--smoothly-color-shade: var(--smoothly-secondary-shade);
	--smoothly-color-tint: var(--smoothly-secondary-tint);
}

[color=tertiary] {
	--smoothly-color: var(--smoothly-tertiary-color);
	--smoothly-color-contrast: var(--smoothly-tertiary-contrast);
	--smoothly-color-shade: var(--smoothly-tertiary-shade);
	--smoothly-color-tint: var(--smoothly-tertiary-tint);
}

[color=success] {
	--smoothly-color: var(--smoothly-success-color);
	--smoothly-color-contrast: var(--smoothly-success-contrast);
	--smoothly-color-shade: var(--smoothly-success-shade);
	--smoothly-color-tint: var(--smoothly-success-tint);
}

[color=warning] {
	--smoothly-color: var(--smoothly-warning-color);
	--smoothly-color-contrast: var(--smoothly-warning-contrast);
	--smoothly-color-shade: var(--smoothly-warning-shade);
	--smoothly-color-tint: var(--smoothly-warning-tint);
}

[color=danger] {
	--smoothly-color: var(--smoothly-danger-color);
	--smoothly-color-contrast: var(--smoothly-danger-contrast);
	--smoothly-color-shade: var(--smoothly-danger-shade);
	--smoothly-color-tint: var(--smoothly-danger-tint);
}

[color=light] {
	--smoothly-color: var(--smoothly-light-color);
	--smoothly-color-contrast: var(--smoothly-light-contrast);
	--smoothly-color-shade: var(--smoothly-light-shade);
	--smoothly-color-tint: var(--smoothly-light-tint);
}

[color=medium] {
	--smoothly-color: var(--smoothly-medium-color);
	--smoothly-color-contrast: var(--smoothly-medium-contrast);
	--smoothly-color-shade: var(--smoothly-medium-shade);
	--smoothly-color-tint: var(--smoothly-medium-tint);
}

[color=dark] {
	--smoothly-color: var(--smoothly-dark-color);
	--smoothly-color-contrast: var(--smoothly-dark-contrast);
	--smoothly-color-shade: var(--smoothly-dark-shade);
	--smoothly-color-tint: var(--smoothly-dark-tint);
}


:host {
	--smoothly-button-border-radius: 0.5rem;
	display: inline-flex;
	box-sizing: border-box;
	border-radius: var(--smoothly-button-border-radius);
	font-size: var(--smoothly-button-font-size, 1rem);
	cursor: pointer;
	border: none;
	outline: none;
	position: relative;
}
:host([shape=rounded]) {
	--smoothly-button-border-radius: 2rem;
}

:host([type=link]) {
	display: inline;
}

:host([disabled]) {
	opacity: 0.5;
}
:host>a {
	font-weight: 400;
	background-color: transparent;
}
:host>a,
:host>button {
	font-size: var(--smoothly-button-font-size);
	border: 1px solid transparent;
	outline: none;
	cursor: pointer;
	display: inline-flex;
	gap: 0.5rem;
	box-sizing: border-box;
}
:host>button {
	font-weight: bold;
	justify-content: center;
	width: 100%;
	align-items: center;
	border-radius: var(--smoothly-button-border-radius);
	padding-inline: var(--smoothly-button-padding-inline, 1rem);
}
:host {
	min-height: var(--smoothly-button-height, 2.5rem);
}

:host:has(> a:empty),
:host:has(> button:empty),
:host>a:empty,
:host>button:empty {
	border-width: 0;
	min-height: 0;
	padding-inline: 0;
}

:host([size=small]) {
	--smoothly-button-height: 2rem;
	--smoothly-button-padding-inline: 0.75rem;
	--smoothly-button-font-size: 0.875rem;
	--smoothly-icon-size: 1.4rem;
}
:host([size=large]) {
	--smoothly-button-height: 3rem;
	--smoothly-button-padding-inline: 1.25rem;
	--smoothly-button-font-size: 1.125rem;
}

:host(:not([size=icon]):not([size=flexible]))>button {
	min-width: 8rem;
}
:host([size=icon]) {
	--smoothly-icon-size: 1.4rem;
}
:host([size=icon])>button {
	min-height: var(--smoothly-button-height, 2.5rem);
	min-width: var(--smoothly-button-height, 2.5rem);
	padding: 0;
}

:host(:not([size=icon])) {
	min-width: 8em;
}

:host([size=flexible]) {
	min-width: unset;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
}

:host([size=flexible])>button {
	min-width: unset;
	padding: 0;
	margin: 0;
}

:host([expand]) {
	width: 100%;
}

:host([expand=full]) {
	border-left: none;
	border-right: none;
	--smoothly-button-border-radius: 0;
}

:host([fill=outline])>button {
	background-color: transparent;
	color: rgb(var(--smoothly-button-foreground));
	fill: rgb(var(--smoothly-button-foreground));
	stroke: rgb(var(--smoothly-button-foreground));
	border-color: rgb(var(--smoothly-button-foreground));
}

:host(:not([fill=clear]):not([disabled]))>button:hover,
:host(:not([disabled]))>button:focus-visible,
:host([fill=outline]:not([disabled])):active>button::before {
	border-color: rgb(var(--smoothly-button-focus-color));
}

:host([fill=outline]:not([disabled]))>button:hover::before,
:host([fill=outline]:not([disabled]))>button:focus-within::before,
:host([fill=outline]:not([disabled]))>button:active::before {
	content: "";
	position: absolute;
	border: 2px solid rgb(var(--smoothly-button-focus-border));
	inset: -1px;
	border-radius: var(--smoothly-button-border-radius);
}

:host(:not([fill=clear]):not([fill=outline]):not([disabled]))>button:hover,
:host(:not([fill=clear]):not([fill=outline]):not([disabled]))>button:focus-visible,
:host(:not([fill=clear]):not([fill=outline]):not([disabled]))>button:active {
	background: rgb(var(--smoothly-button-hover-background));
}

:host>button,
:host ::slotted(smoothly-icon) {
	color: rgb(var(--smoothly-button-foreground));
	stroke: rgb(var(--smoothly-button-foreground));
	fill: rgb(var(--smoothly-button-foreground));
}

:host([hidden]) {
	display: none;
}


:host(:not([display])) {
	display: none;
}

:host([type="input"])::slotted(smoothly-button>button) {
	cursor: pointer;
	filter: opacity(60%);
	--smoothly-button-foreground: var(--smoothly-input-foreground);
	background-color: transparent;
}

:host::slotted(smoothly-button>button > * > * + smoothly-icon) {
	display: none;
}

:host([disabled]) {
	cursor: not-allowed
}

:host([type="input"]):hover ::slotted(smoothly-icon) {
	cursor: pointer;
	filter: opacity(100%);
}