@import 'nib';

global-reset();

@import './mixins';
@import './fonts';
@import './reset';
@import './keyframes';

:root {
	--logo: url('/resources/images/logo.svg');
	--logo-width: 8%;
	--logo-height: 4%;

	--background: url('/resources/images/background.svg');
	--background-color: rgba(51, 51, 51, 1.0);

	--circle-button-color: rgba(255, 255, 255, 0.3);
	--circle-button-toggled-color: rgba(255, 255, 255, 0.7);
	--circle-button-unsupported-color: rgba(212, 34, 65, 0.7);
	--circle-button-diabled-color: rgba(255, 255, 255, 0.5);
	--circle-button-size: 2.5em;

	--media-control-button-color: rgba(255, 255, 255, 0.85);
	--media-control-botton-on: rgba(255, 255, 255, 0.7);
	--media-control-botton-off: rgba(212, 34, 65, 0.7);
	--media-control-botton-disabled: rgba(255, 255, 255, 0.5)
	--media-control-button-size: 1.5em;

	--me-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
	--me-border: 1px solid rgba(255, 255, 255, 0.15);
	--me-width: 20vmin;
	--me-height: 15vmin;

	--peer-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
	--peer-border: 1px solid rgba(255, 255, 255, 0.15);
	--peer-empty-avatar: url('/resources/images/buddy.svg');
	--peer-bg-color: rgba(42, 75, 88, 0.9);
	--peer-video-bg-color: rgba(0, 0, 0, 0.75);

	--chat-message-color: rgba(0, 0, 0, 0.1);
	--chat-input-bg-color: rgba(255, 255, 255, 1.0);
	--chat-input-text-color: rgba(0, 0, 0, 1.0);
	--chat-send-bg-color: rgba(170, 238, 255, 1.0);

	--filesharing-bg-color: rgba(170, 238, 255, 1.0);

	--notification-info-bg-color: rgba(10, 29, 38, 0.75);
	--notification-info-text-color: rgba(255, 255, 255, 0.65);
	--notification-error-bg-color: rgba(255, 25, 20, 0.65);
	--notification-error-text-color: rgba(255, 255, 255, 0.85);

	--active-speaker-border-color: rgba(255, 255, 255, 1.0);
	--selected-peer-border-color: rgba(55, 126, 255, 1.0);
}

html {
	height: 100%;
	font-family: 'Roboto';
	font-weight: 300;
	overflow-x: hidden;
	overflow-y: hidden;

	+mobile() {
		font-size: 12px;
	}
}

body {
	height: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	background-color: var(--background-color);

	+desktop() {
		font-size: 16px;
		background-image: var(--background);
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
}

#multiparty-meeting {
	height: 100%;
	width: 100%;
}

// Components
@import './components/Room';
@import './components/Logo';
@import './components/Sidebar';
@import './components/Me';
@import './components/Peers';
@import './components/Peer';
@import './components/PeerView';
@import './components/HiddenPeers';
@import './components/ScreenView';
@import './components/Notifications';
@import './components/Chat';
@import './components/ToolArea';
@import './components/ParticipantList';
@import './components/FullScreenView';
@import './components/FullView';
@import './components/Filmstrip';
@import './components/FileSharing';
@import './components/AudioPeers';

// Hack to detect in JS the current media query
#multiparty-meeting-media-query-detector {
	position: absolute;
	z-index: -1000;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 1px;

	// In desktop let it "visible" so elem.offsetParent returns the parent element
	+desktop() {}

	// In mobile ensure it's not displayed so elem.offsetParent returns null
	+mobile() {
		display: none;
		position: fixed; // Required for old IE
	}
}