// Layout Mixins - Container, responsive layouts, and structural patterns
// This file contains mixins for layout patterns and containers

// Mixin for smooth theme transitions
@mixin ov-theme-transition {
	transition:
		background-color var(--ov-meet-transition-normal),
		color var(--ov-meet-transition-normal),
		border-color var(--ov-meet-transition-normal),
		box-shadow var(--ov-meet-transition-normal);
}

// Mixin for responsive containers
@mixin ov-container {
	max-width: var(--ov-meet-container-max-width);
	margin: 0 auto;
	padding: var(--ov-meet-spacing-lg) var(--ov-meet-spacing-xl) var(--ov-meet-spacing-xl) var(--ov-meet-spacing-xl);
	height: calc(100% - (64px + var(--ov-meet-spacing-lg))); // Full height minus header and footer
}

// Mixin for truncated text
@mixin ov-text-truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

// Mixin for flex centering
@mixin ov-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

// Mixin for responsive grid
@mixin ov-grid-responsive($min-column-width: 300px) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax($min-column-width, 1fr));
	gap: var(--ov-meet-grid-gap);
}

// Mixin for consistent hover states
@mixin ov-hover-lift($distance: -2px) {
	transition:
		transform var(--ov-meet-transition-normal),
		box-shadow var(--ov-meet-transition-normal);

	&:hover {
		transform: translateY($distance);
		box-shadow: var(--ov-meet-shadow-hover);
	}
}

// Mixin for icons with consistent sizes
@mixin ov-icon($size: md) {
	margin: initial;
	@if $size == xs {
		font-size: var(--ov-meet-icon-size-sm);
		width: var(--ov-meet-icon-size-sm);
		height: var(--ov-meet-icon-size-sm);
	} @else if $size == sm {
		font-size: var(--ov-meet-icon-size-sm);
		width: var(--ov-meet-icon-size-sm);
		height: var(--ov-meet-icon-size-sm);
	} @else if $size == md {
		font-size: var(--ov-meet-icon-size-md);
		width: var(--ov-meet-icon-size-md);
		height: var(--ov-meet-icon-size-md);
	} @else if $size == lg {
		font-size: var(--ov-meet-icon-size-lg);
		width: var(--ov-meet-icon-size-lg);
		height: var(--ov-meet-icon-size-lg);
	} @else if $size == xl {
		font-size: var(--ov-meet-icon-size-xl);
		width: var(--ov-meet-icon-size-xl);
		height: var(--ov-meet-icon-size-xl);
	}
}
