@import "mixin";

$separator_thickness: 5px;
$small_device: 650px;
$animation_length: .5s;

html:root {
	--app-background: #1e1e1e;

	--chat-background: #353535;
	--channel-tree-background: #353535;
	--server-log-background: #353535;

	--footer-background: #252525;
	--footer-text: #666666;

	--channel-chat-seperator: #1e1e1e;
	--channel-chat-seperator-selected: #707070;
}

.hide-small {
	opacity: 1;
	transition: opacity $animation_length linear;
}

.show-small {
	display: none;

	opacity: 0;
	transition: opacity $animation_length linear;
}

.app-container {
	right: 0;
	left: 0;
	top: 0;

	overflow: auto;
	padding: 0;
}

@media only screen and (max-width: $small_device) {
	.hide-small {
		display: none;
		opacity: 0;
		transition: opacity $animation_length linear;
	}

	.show-small {
		display: block !important;

		opacity: 1 !important;
		transition: opacity $animation_length linear;
	}
}

$animation_seperator_length: .1s;
.container-seperator {
	@include transition(all $animation_seperator_length ease-in-out);
	background: var(--channel-chat-seperator);

	flex-grow: 0;
	flex-shrink: 0;

	&.horizontal {
		height: $separator_thickness;
		width: 100%;

		cursor: row-resize;
	}

	&.vertical {
		width: $separator_thickness;
		height: 100%;

		cursor: col-resize;
	}

	&.seperator-selected {
		@include transition(all $animation_seperator_length ease-in-out);

		background-color: var(--channel-chat-seperator-selected);
	}
}

html, body {
	overflow: hidden;
}

body {
	background: var(--app-background)!important;
}