@use '@talend/design-tokens/lib/tokens' as tokens;

@import './variables';

$tc-datepicker-width: 19.375rem !default;

@mixin nav-action {
	padding: 0;
	background: none;
	border: none;
}

@mixin picker-action {
	font: tokens.$coral-paragraph-s;

	&.selected {
		background-color: tokens.$coral-color-accent-background;
		color: tokens.$coral-color-accent-text;
		transition: color 0.2s ease-in;
		font: tokens.$coral-paragraph-s-bold;
	}

	&:disabled {
		color: tokens.$coral-color-neutral-text-disabled;
		opacity: 0.54;
	}
}

@mixin picker-underline {
	content: '';
	border-bottom: $border-default;
}

@mixin popper {
	width: $tc-datepicker-width;
	background: tokens.$coral-color-neutral-background;
	box-shadow: tokens.$coral-elevation-shadow-neutral-m;
	z-index: tokens.$coral-elevation-layer-interactive-front;
}

@mixin date-picker {
	display: flex;
	width: fit-content;

	:global(.range-input) {
		display: flex;
		flex-direction: column;
		gap: tokens.$coral-spacing-xxs;
	}
}

@mixin date-picker-inline {
	:global(.range-input) {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: tokens.$coral-spacing-xxs;
	}
}

@mixin arrow {
	display: flex;
	align-items: flex-end;
	margin: 10px;
}