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

.db-card {
	@extend %default-card;

	@include component.get-data-spacing();

	display: flex;
	flex-direction: column;

	&[data-elevation-level="1"],
	&:not([data-elevation-level]) {
		background-color: colors.$db-adaptive-bg-basic-level-1-default;

		&[data-behaviour="interactive"] {
			@include helpers.hover {
				background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
			}

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

	&[data-elevation-level="2"] {
		background-color: colors.$db-adaptive-bg-basic-level-2-default;

		&[data-behaviour="interactive"] {
			@include helpers.hover {
				background-color: colors.$db-adaptive-bg-basic-level-2-hovered;
			}

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

	&[data-elevation-level="3"] {
		background-color: colors.$db-adaptive-bg-basic-level-3-default;

		&[data-behaviour="interactive"] {
			@include helpers.hover {
				background-color: colors.$db-adaptive-bg-basic-level-3-hovered;
			}

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