@import './variables';

.s-card {
	background-color: var(--theme-cards);
	color: var(--theme-text-primary);
	display: block;
	max-width: 100%;
	outline: none;
	text-decoration: none;
	transition-property: box-shadow, opacity;
	overflow-wrap: $card-overflow-wrap;
	position: relative;
	white-space: $card-white-space;

	&:not(.flat) {
		@include elevation($card-elevation);
	}

	&:not(.tile) {
		border-radius: var(--theme-card-border-radius);
	}

	&.outlined {
		border: $card-outlined-border-width solid rgba(0, 0, 0, 0.12);
		@include elevation(0);
	}

	&.raised {
		@include elevation($card-raised-elevation);
	}

	&.shaped {
		border-radius: $card-shaped-border-radius;
	}

	&.hover {
		cursor: pointer;
		transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

		&:hover,
		&:focus {
			@include elevation($card-hover-elevation);
		}
	}

	&.link {
		cursor: pointer;

		.s-chip {
			cursor: pointer;
		}

		&::before {
			background: currentColor;
			bottom: 0;
			content: '';
			left: 0;
			opacity: 0;
			pointer-events: none;
			position: absolute;
			right: 0;
			top: 0;
			transition: 0.2s opacity map-get($transitions, 'fast-in-slow-out');
		}

		&:focus::before {
			opacity: $card-link-focus-opacity;
		}
	}

	&.disabled {
		pointer-events: none;
		user-select: none;

		> *:not(.s-progress-linear) {
			opacity: $card-disabled-opacity;
			transition: inherit;
		}
	}

	> *:first-child:not(.s-btn):not(.s-chip),
	> [slot='progress'] + *:not(.s-btn):not(.s-chip) {
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;
	}

	> *:last-child:not(.s-btn):not(.s-chip) {
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit;
	}
}