@use '../../../variables' as *;

$colors-map: (
	primary: var(--#{$prefix}primary-color),
	secondary: var(--#{$prefix}secondary-color),
	success: var(--#{$prefix}success-color),
	info: var(--#{$prefix}info-color),
	warning: var(--#{$prefix}warning-color),
	danger: var(--#{$prefix}danger-color),
);

.#{$prefix}theme-test-dark {
	.#{$prefix}button {
		--#{$prefix}button-font-weight: 500;
		--#{$prefix}button-font-family: var(--#{$prefix}font-sans);
		--#{$prefix}button-border-radius: 9999px;
		--#{$prefix}button-icon-only-border-radius: 9999px;

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}_hover-overlay-opacity: 0;
			--#{$prefix}_hover-overlay-opacity: 0.12;
			--#{$prefix}_active-overlay-opacity: 0.24;
		}

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-width: 2px;
			--#{$prefix}outline-border-color: transparent;
		}

		&--xs {
			--#{$prefix}button-height: 20px;
			--#{$prefix}button-padding-y: 0;
			--#{$prefix}button-padding-x: 0.5rem;
			--#{$prefix}button-font-size: 0.625rem;
			--#{$prefix}button-gap: 0.25rem;

			.#{$prefix}icon {
				--#{$prefix}icon-font-size: 0.75rem;
			}
		}

		&--sm {
			--#{$prefix}button-height: 28px;
			--#{$prefix}button-padding-y: 0;
			--#{$prefix}button-padding-x: 0.75rem;
			--#{$prefix}button-font-size: 0.75rem;
			--#{$prefix}button-gap: 0.375rem;

			.#{$prefix}icon {
				--#{$prefix}icon-font-size: 1rem;
			}
		}

		&--md {
			--#{$prefix}button-height: 36px;
			--#{$prefix}button-padding-y: 0;
			--#{$prefix}button-padding-x: 1rem;
			--#{$prefix}button-font-size: 0.875rem;
			--#{$prefix}button-gap: 0.5rem;

			.#{$prefix}icon {
				--#{$prefix}icon-font-size: 1.125rem;
			}
		}

		&--lg {
			--#{$prefix}button-height: 44px;
			--#{$prefix}button-padding-y: 0;
			--#{$prefix}button-padding-x: 1.25rem;
			--#{$prefix}button-font-size: 1rem;
			--#{$prefix}button-gap: 0.625rem;

			.#{$prefix}icon {
				--#{$prefix}icon-font-size: 1.25rem;
			}
		}

		&--xl {
			--#{$prefix}button-height: 52px;
			--#{$prefix}button-padding-y: 0;
			--#{$prefix}button-padding-x: 1.5rem;
			--#{$prefix}button-font-size: 1rem;
			--#{$prefix}button-gap: 0.75rem;

			.#{$prefix}icon {
				--#{$prefix}icon-font-size: 1.5rem;
			}
		}

		&--filled {
			--#{$prefix}button-border-color: transparent;
			--#{$prefix}button-color: var(--#{$prefix}black-color);

			.#{$prefix}chip {
				--#{$prefix}chip-background: var(--#{$prefix}black-color);
			}
		}

		&--outlined {
			& > .#{$prefix}outline {
				--#{$prefix}outline-border-color: currentColor;
			}
		}

		&--flat {
			& > .#{$prefix}overlay {
				--#{$prefix}overlay-opacity: 0.2;
				--#{$prefix}overlay-color: inherit;
				--#{$prefix}_hover-overlay-opacity: 0.3;
				--#{$prefix}_active-overlay-opacity: 0.4;
			}
		}
	}

	@each $key, $value in $colors-map {
		.#{$prefix}button--filled.#{$prefix}button--#{$key} {
			--#{$prefix}button-background: #{$value};
		}

		.#{$prefix}button--outlined.#{$prefix}button--#{$key} {
			--#{$prefix}button-color: #{$value};
		}

		.#{$prefix}button--flat.#{$prefix}button--#{$key} {
			--#{$prefix}button-color: #{$value};
		}

		.#{$prefix}button--text.#{$prefix}button--#{$key} {
			--#{$prefix}button-color: #{$value};
		}

		@if $key == 'secondary' {
			.#{$prefix}button--filled.#{$prefix}button--#{$key} {
				--#{$prefix}button-color: var(--#{$prefix}black-color);
			}

			.#{$prefix}button--outlined.#{$prefix}button--#{$key} {
				--#{$prefix}button-color: var(--#{$prefix}black-color);
			}

			.#{$prefix}button--flat.#{$prefix}button--#{$key} {
				--#{$prefix}button-color: var(--#{$prefix}black-color);
			}

			.#{$prefix}button--text.#{$prefix}button--#{$key} {
				--#{$prefix}button-color: var(--#{$prefix}black-color);
			}
		}
	}
}