@use '@angular/material' as mat;
@include mat.core();

// Define your custom palettes
$openvidu-components-primary: mat.define-palette(mat.$blue-grey-palette, 500, 300);
$openvidu-components-accent: mat.define-palette(mat.$amber-palette, 500, 700, A100);
$openvidu-components-warn: mat.define-palette(mat.$red-palette);

// Define the theme
$openvidu-components-theme: mat.define-light-theme(
	(
		color: (
			primary: $openvidu-components-primary,
			accent: $openvidu-components-accent,
			warn: $openvidu-components-warn
		)
	)
);

// Include the non-legacy themes for the components
@include mat.all-component-themes($openvidu-components-theme);

// If you have custom typography configurations, include them as well
@include mat.all-component-typographies($openvidu-components-theme);

// If you need to adjust density, include it as well
// @include mat.all-component-density-styles($openvidu-components-theme);

// Custom openvidu-components styles
:root {
	--ov-primary-color: #303030;
	--ov-secondary-color: #3e3f3f;
	--ov-tertiary-color: #598eff;
	--ov-warn-color: #eb5144;
	--ov-accent-color: #ffae35;
	--ov-light-color: #e6e6e6;

	--ov-logo-background-color: #3a3d3d;
	--ov-text-color: #ffffff;

	--ov-panel-text-color: #1d1d1d;
	--ov-panel-background: #ffffff;

	--ov-buttons-radius: 50%;
	--ov-leave-button-radius: 10px;
	--ov-video-radius: 5px;
	--ov-panel-radius: 5px;
}

/* You can add global styles to this file, and also import other style files */

html,
body {
	height: 100%;
	overflow: hidden;
}
body {
	margin: 0;
	font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
}

.spacer {
	flex: 1;
}
.toolbar img {
	margin: 0 16px;
}

.toolbar #twitter-logo {
	height: 40px;
	margin: 0 16px;
}

.toolbar #twitter-logo:hover {
	opacity: 0.8;
}

.back-button {
	margin-top: 8px;
	display: flex;
	align-items: center;
	line-height: 20px;
	padding: 10px;
	position: absolute;
	top: 70px;
	svg {
		transform: rotate(180deg);
	}
}

.back-button a {
	display: flex;
	align-items: center;
}