@charset "utf-8";

@use "@db-ui/foundations/build/styles/fonts";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/icons";
@use "@db-ui/foundations/build/styles/helpers";
@use "../../styles/internal/component";
@use "../../styles/internal/button-components";

.db-button {
	@extend %default-interactive-component;
	@extend %default-button;
	@extend %db-overwrite-font-size-md;

	color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
	block-size: variables.$db-sizing-md;
	inline-size: fit-content;
	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;

	// disable text-decoration if someone wants to use the button for an <a> tag
	text-decoration: none;

	@include helpers.hover {
		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
	}

	@include helpers.active {
		background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
	}

	// Square icon only buttons
	&[data-no-text="true"] {
		@include icons.is-icon-text-replace();

		padding: 0;
		inline-size: variables.$db-sizing-md;

		&::before {
			margin: auto;
		}
	}

	&[data-size="small"] {
		@extend %db-overwrite-font-size-sm;

		block-size: variables.$db-sizing-sm;

		&:not([data-no-text="true"]) {
			padding: variables.$db-spacing-fixed-3xs
				variables.$db-spacing-fixed-sm;

			&::before {
				margin-inline-end: variables.$db-spacing-fixed-2xs;
			}
		}

		// Square icon only buttons
		&[data-no-text="true"] {
			inline-size: variables.$db-sizing-sm;
		}
	}

	&[data-width="full"] {
		inline-size: 100%;
	}

	&[data-variant="brand"] {
		background-color: colors.$db-brand-origin-default;
		color: colors.$db-brand-on-origin-default;
		border-color: colors.$db-brand-on-bg-basic-emphasis-70-default;

		@include helpers.hover {
			background-color: colors.$db-brand-origin-hovered;
			border-color: colors.$db-brand-on-bg-basic-emphasis-70-hovered;
		}

		@include helpers.active {
			background-color: colors.$db-brand-origin-pressed;
			border-color: colors.$db-brand-on-bg-basic-emphasis-70-pressed;
		}
	}

	&[data-variant="filled"],
	&[data-variant="ghost"] {
		@extend %transparent-border;
	}

	&[data-variant="outlined"],
	&:not([data-variant]),
	&[data-variant="ghost"] {
		background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
	}

	&[data-variant="filled"] {
		background-color: colors.$db-adaptive-bg-basic-transparent-semi-default;
	}

	&:disabled {
		opacity: component.$default-disabled;
	}

	// States (currently only "loading")
	&[data-state="loading"] {
		@include icons.is-icon-text-replace();

		font-size: 0;

		&::before {
			content: "";
		}
	}

	// Workaround for current stencil implementation for header
	&:has(> .db-button) {
		margin: 0;
		padding: 0;

		&::before {
			content: none;
		}
	}
}