@import 'general';
@import 'scroll';

body {
    color: $text;
	max-height: 1080px;
	max-width: 1920px;

	min-width: 640px;
	min-height: 480px;

	overflow-y: hidden;
	overflow-x: hidden;
}


label {
    color: $text;
}

h1 {
    color: $text;
    display: block;
}
.center {
    margin: 0 auto;
    text-align: center;
}
::placeholder {
    color: $back-grey;
}

input {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

// Menu bar stuff
.btn-nav-settings {
	color: $text;
    border-color: $text;
    margin-right: 1em;
}

// Join modal meme
.join-style {
    color: $text;
    background: $top-grey;
}

.join-form-label {
    color: $text;
}

// mostly used to let the sidebar be of a correct height
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}


// CHANNEL SIDEBAR Things
#channels-container {
    min-width: 150px;
    max-width: 150px;
    min-height: 100vh;
}

.channels-list-header {
    color: $text;
    background-color: $back-grey;
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

#channels-container ul li a {
    padding: 10px;
    display: block;
    text-decoration: none;
    color: $text;
}

#channels-container ul li a:hover {
    background-color: $bar-grey;
}

.author-name {
    color: white;
}

.message {
    padding: 10px;
    display: block;
    text-decoration: none;
    color: $text;
}

.message:hover {
    background-color: $top-grey;
}

.message a:hover {
    background-color: $bar-grey;
    color: $text;
    text-decoration: none;
}

.message a:focus {
    background-color: $bar-grey;
    color: $text;
    text-decoration: none;
}


#messages-container {
	padding-bottom: 50px;
	overflow-y: scroll;
	min-height: 480;
	max-height: 1005px; // 1080 - $send-container-height
}

// Now the message box which must be pinned at the bottom
#send-container {
	position: absolute;
	bottom: 0;
	height: 50px;
	width: 100vw;
}

#message-box {
	padding-right: 25px;
}

#message-submit {
	padding-left: 25px;
	width: 25px;
}