/* Hot Toast */
@use 'node_modules/@ngxpert/hot-toast/src/styles/styles.css';

/* Tailwind CSS */
@import 'tailwindcss';

@source "../../src";

@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

@theme {
	--color-green: #25d482;
	--color-green-50: #bdf3da;
	--color-green-100: #acf0d0;
	--color-green-200: #89eabd;
	--color-green-300: #66e4a9;
	--color-green-400: #44de96;
	--color-green-500: #25d482;
	--color-green-600: #1da465;
	--color-green-700: #147447;
	--color-green-800: #0c452a;
	--color-green-900: #04150d;

	--color-red: #d95757;
	--color-red-50: #fbeded;
	--color-red-100: #f7dcdc;
	--color-red-200: #f0bbbb;
	--color-red-300: #e89a9a;
	--color-red-400: #e17878;
	--color-red-500: #d95757;
	--color-red-600: #ca2e2e;
	--color-red-700: #9c2323;
	--color-red-800: #6f1919;
	--color-red-900: #410f0f;

	--color-yellow: #f0f33e;
	--color-yellow-50: #fdfeeb;
	--color-yellow-100: #fcfdd8;
	--color-yellow-200: #f9fab1;
	--color-yellow-300: #f6f88b;
	--color-yellow-400: #f3f564;
	--color-yellow-500: #f0f33e;
	--color-yellow-600: #e7ea0f;
	--color-yellow-700: #b3b60b;
	--color-yellow-800: #7f8108;
	--color-yellow-900: #4b4c05;

	--color-gold: #d1d425;
	--color-gold-50: #f3f3bd;
	--color-gold-100: #eff0ac;
	--color-gold-200: #e9ea89;
	--color-gold-300: #e2e466;
	--color-gold-400: #dcde44;
	--color-gold-500: #d1d425;
	--color-gold-600: #a2a41d;
	--color-gold-700: #737414;
	--color-gold-800: #44450c;
	--color-gold-900: #151504;

	--color-blue: #0038ff;
	--color-blue-50: #b8c7ff;
	--color-blue-100: #a3b7ff;
	--color-blue-200: #7a98ff;
	--color-blue-300: #5278ff;
	--color-blue-400: #2958ff;
	--color-blue-500: #0038ff;
	--color-blue-600: #002cc7;
	--color-blue-700: #001f8f;
	--color-blue-800: #001357;
	--color-blue-900: #00071f;

	--color-tourquoise: #3be8ff;
	--color-tourquoise-50: #f3feff;
	--color-tourquoise-100: #defbff;
	--color-tourquoise-200: #b5f6ff;
	--color-tourquoise-300: #8df2ff;
	--color-tourquoise-400: #64edff;
	--color-tourquoise-500: #3be8ff;
	--color-tourquoise-600: #03e1ff;
	--color-tourquoise-700: #00b2ca;
	--color-tourquoise-800: #008192;
	--color-tourquoise-900: #004f5a;

	--color-grey: #e9e9e9;
	--color-grey-50: #ffffff;
	--color-grey-100: #ffffff;
	--color-grey-200: #ffffff;
	--color-grey-300: #ffffff;
	--color-grey-400: #fdfdfd;
	--color-grey-500: #e9e9e9;
	--color-grey-600: #cdcdcd;
	--color-grey-700: #b1b1b1;
	--color-grey-800: #959595;
	--color-grey-900: #797979;

	--color-darkGrey: #727272;
	--color-darkGrey-50: #cecece;
	--color-darkGrey-100: #c4c4c4;
	--color-darkGrey-200: #afafaf;
	--color-darkGrey-300: #9b9b9b;
	--color-darkGrey-400: #868686;
	--color-darkGrey-500: #727272;
	--color-darkGrey-600: #565656;
	--color-darkGrey-700: #3a3a3a;
	--color-darkGrey-800: #1e1e1e;
	--color-darkGrey-900: #020202;

	--color-reservation-unconfirmed: #f08c00;
	--color-reservation-approved: #828ade;
	--color-reservation-seated: #2f9e44;
	--color-reservation-rejected: #6c757d;
	--color-reservation-late: #e03131;
	--color-reservation-done: #2d6a4f;

	--font-sans: 'Roboto', sans-serif;
	--font-serif: 'Roboto Slab', serif;

	--default-ring-width: 3px;
	--default-ring-color: var(--color-blue-500);
}

@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-gray-200, currentColor);
	}

	input::placeholder,
	textarea::placeholder {
		color: var(--color-gray-400);
	}

	button {
		cursor: pointer;
	}
}

@import './default/default.theme';

/* Fonts */
@import './fonts.scss';

/* CDK */
@import '@angular/cdk/overlay-prebuilt.css';

@import './resize-element';

/* Scrollbar */
::-webkit-scrollbar {
	width: 6px;
	height: 4px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #f1f1f1;
	margin: 2px 0;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #b5b5b5;
	border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #878787;
}

.add-reservation-panel {
	@apply rounded-xl w-96 shadow-[0_0_8px_rgba(0,0,0,0.3)];
}

/* Hide number input arrow */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type='number'] {
	-moz-appearance: textfield;
}

.units-select {
	.ng-select-container {
		display: none !important;
	}
	.ng-dropdown-panel {
		left: -100px !important;
		width: 90px !important;
	}
}

/* Reservation States */
.reservation-unconfirmed-bg {
	background-color: var(--color-reservation-unconfirmed);
}

.reservation-approved-bg {
	background-color: var(--color-reservation-approved);
}

.reservation-seated-bg {
	background-color: var(--color-reservation-seated);
}

.reservation-rejected-bg {
	background-color: var(--color-reservation-rejected);
}

.reservation-late-bg {
	background-color: var(--color-reservation-late);
}

.reservation-done-bg {
	background-color: var(--color-reservation-done);
}