@import './vars.scss';
@mixin getThemeColor($name, $isBg: true, $opacity: true) {
	@if $isBg {
		background-color: var(--ui-#{$name});
		color: var(--ui-theme-primary);
		&:hover {
			@if $opacity {
				opacity: 0.9;
			}
		}
	} @else {
		color: var(--ui-#{$name});
	}
}

@mixin getThemeColors($isBg: true, $opacity: true) {
	@each $name, $color in $colors {
		.#{$name} {
			@include getThemeColor($name, $isBg, $opacity);
		}
	}
}


@mixin getThemeColorsInclude($isBg: true, $opacity: true) {
	@each $name, $color in $colors {
		&.#{$name} {
			@include getThemeColor($name, $isBg, $opacity);
		}
	}
}

@mixin getField {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
	'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

	color: #495057;
	background: var(--ui-white);

	border: 1px solid #ced4da;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
	appearance: none;
	border-radius: var(--ui-radius);
	width: 100%;
	&:hover {
		border-color: var(--ui-primary);
	}

	&[disabled] {
		background: var(--ui-disabled-color);
		cursor: not-allowed;
	}
}

@mixin Card {
	& {
		background: var(--ui-white);
		color: #495057;
		box-shadow: var(--ui-raised);
		border-radius: 6px;
	}
}