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

%center-icon {
	&::before {
		--db-icon-margin-end: 0;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		block-size: calc(
			#{form-components.$font-size-height} - 2 *
				#{variables.$db-border-height-3xs}
		);
		inline-size: calc(
			#{form-components.$font-size-height} - 2 *
				#{variables.$db-border-height-3xs}
		);
	}
}

.db-checkbox {
	@extend %helper-message;

	@include form-components.set-default-check-element(check);

	input {
		display: flex;
		border-radius: variables.$db-border-radius-2xs;
		align-items: center;
		justify-content: center;

		&:checked {
			--db-check-element-border-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};

			@extend %center-icon;

			// Check icon
			@include icons.set-icon("check");
			@include colors.set-current-colors(
				colors.$db-adaptive-bg-inverted-contrast-max-default,
				colors.$db-adaptive-on-bg-inverted-default,
				colors.$db-adaptive-bg-inverted-contrast-max-hovered,
				colors.$db-adaptive-bg-inverted-contrast-max-pressed
			);

			// The icon within the checkbox has the same dimensions as the checkbox itself and that for there can't be any border
			border-width: 0;
		}

		&:indeterminate {
			@extend %center-icon;

			@include icons.set-icon("minus");
		}

		@media (forced-colors: active) {
			&:indeterminate,
			&:checked {
				--db-check-element-border-color: #{colors.$db-adaptive-on-bg-basic-emphasis-100-default};

				border-width: form-components.$check-border-size;

				&:not([data-hide-icon-before="true"])::before {
					align-content: center;
					font-size: calc(
						var(--db-icon-font-size) - 2 *
							#{form-components.$check-border-size}
					);
					padding: #{form-components.$check-border-size};
				}
			}
		}
	}
}