.custom-scroll(@background, @thumb, @width: 8px, @height: 8px) {
	&::-webkit-scrollbar {
		height: @height;
		width: @width;
		background: @background;
	}
	&::-webkit-scrollbar-thumb {
		background-color: @thumb;
		-webkit-border-radius: 50px;
	}
	&::-webkit-scrollbar-corner {
		background-color: @background;
	}
}

a {
	&:hover,
	&:active {
		color: @primary-font-color;
	}
}

code {
	background-color: @code-background;
	border-color: @code-border;
	color: @code-color;
}

blockquote {
	&:before {
		background-color: @blockquote-background;
	}
}

.login-terms {
	color: @smallprint-font-color;
	a {
		color: @smallprint-font-color;
		&:hover {
			color: @smallprint-hover-color;
		}
	}
}

.upload-preview {
	background-color: @secondary-background-color;
}

.upload-preview-title {
	background-color: @tertiary-background-color;
}

.first-unread {
	&.first-unread-opaque {
		.body {
			&::before {
				background-color: lighten(@info-font-color, 25%);
			}
			&::after {
				color: @info-font-color;
			}
		}
	}
	.body {
		&::before {
			background-color: lighten(@info-active-font-color, 25%);
		}
		&::after {
			background-color: @content-background-color;
			color: @info-active-font-color;
		}
	}
}

.alert {
	border-color: rgba(0, 0, 0, 0);
}

.alert-warning {
	color: #8A6D3B;
	background-color: #FCF8E3;
	border-color: #FAEBCC;
}

.alert-danger {
	color: #A94442;
	background-color: #F2DEDE;
	border-color: #EBCCD1;
}

.scrollable {
	.custom-scroll(transparent, #BFBFBF);
}

.rocket-form {
	legend {
		&:after {
			background-color: #DFDFDF;
		}
	}
	&.request-password {
		color: white;
	}
}

.input-line {
	.clearfix;
	&.search {
		.icon-search {
			color: @secondary-font-color;
		}
	}
	> label {
		color: @primary-font-color;
	}
}

.rocket-h2 {
	color: #EFEFEF;
}

.rocket-h3 {
	color: #EAEAEA;
}

html {
	.custom-scroll(transparent, @custom-scrollbar-color, 3px);
}

body {
	color: @primary-font-color;
	background-color: @primary-background-color;
}

textarea,
select,
input[type='text'],
input[type='number'],
input[type='email'],
input[type='url'],
input[type='password'] {
	border-color: #E7E7E7;
	background-color: #fff;
}

input.search {
	&:before {
		background-color: #000;
	}
}

.form-horizontal .control-label {
	color: @primary-font-color;
}

.-autocomplete-container {
	p {
		color: @secondary-font-color;
	}
}

.-autocomplete-item {
	color: @secondary-font-color;
	i {
		color: @secondary-font-color;
	}
	&.selected {
		background-color: @tertiary-background-color;
		color: @primary-font-color;
	}
}

label.required:after {
	color: red;
}

.status-offline,
.icon-at.status-offline {
	color: @status-offline;
}

.status-online,
.icon-at.status-online {
	color: @status-online;
}

.status-busy,
.icon-at.status-busy {
	color: @status-busy;
}

.status-away,
.icon-at.status-away {
	color: @status-away;
}

// TODO -- Refactor favorite styles and logic;
.favorite-room {
	color: #FECF09;
}

.toggle-favorite {
	color: #AAA;
}

.btn-loading {
	color: #444 !important;
	background-color: transparent !important;
	&:hover {
		background-color: transparent !important;
	}
}

// new layout buttons
.button {
	color: rgba(255, 255, 255, 0.85);
	background-color: @action-buttons-color;
	&:before {
		background-color: rgba(0, 0, 0, 0.1);
	}
	&:hover {
		color: #FFF;
	}
	&.secondary {
		background-color: @tertiary-background-color;
		color: @primary-font-color;
		&:before {
			background-color: rgba(0, 0, 0, 0.045);
		}
	}
	&.delete,
	&.remove,
	&.red {
		background-color: #bc2031;
	}
	&.lightblue {
		background-color: #02acec;
	}
	&.clean {
		background-color: @clean-buttons-color;
	}
	&.facebook {
		background-color: #325c99;
	}
	&.twitter {
		background-color: #02acec;
	}
	&.google {
		background-color: #dd4b39;
	}
	&.github {
		background-color: #4c4c4c;
	}
	&.gitlab {
		background-color: #373d47;
	}
	&.trello {
		background-color: #026aa7;
	}
	&.meteor-developer {
		background-color: #de4f4f;
	}
	&.wordpress {
		background-color: #1e8cbe;
	}
}

.burger {
	i {
		background-color: #333;
	}
	.unread-burger-alert {
		background-color: #F95555;
		color: @content-background-color;
	}
}

.arrow {
	&:before,
	&:after {
		background-color: mix(@quaternary-font-color, @primary-background-color, 65%);
	}
}

a.github-fork {
	background-color: #5c5c5c;
	color: #f0f0f0;
	&:hover {
		background-color: #4b4b4b;
		color: #FFF;
	}
	&:before {
		border-top-color: #f0f0f0;
	}
	&:after {
		border-top-color: #f0f0f0;
	}
}

.mac-bar {
	background-color: #ddd;
	i {
		background-color: #ff5f57;
		&:nth-child(2) {
			background-color: #ffbd2e;
		}
		&:nth-child(3) {
			background-color: #28ca41;
		}
	}
}

.avatar {
	.avatar-image {
		background-color: transparent;
	}
	&[initials]:before {
		color: #FFF;
	}
}

#rocket-chat {
	background-color: @content-background-color;
}

.account-box {
	.info {
		background-color: @primary-background-color;
		h4 {
			color: mix(@quaternary-font-color, @primary-background-color, 65%);
		}
		&.status-offline {
			.thumb:after {
				border-color: darken(@status-offline, 5%);
				background-color: @status-offline;
			}
		}
		&.status-online {
			.thumb:after {
				border-color: darken(@status-online, 5%);
				background-color: @status-online;
			}
		}
		&.status-away {
			.thumb:after {
				border-color: darken(@status-away, 5%);
				background-color: @status-away;
			}
		}
		&.status-busy {
			.thumb:after {
				border-color: darken(@status-busy, 5%);
				background-color: @status-busy;
			}
		}
	}
	.options {
		background-color: @primary-background-color;
		.status {
			&:after {
				border-color: #6f6f6f;
			}
			&.offline {
				&:after {
					border-color: #666666;
					background-color: #7b7b7b;
				}
			}
			&.online {
				&:after {
					border-color: #2c9210;
					background-color: #35AC19;
				}
			}
			&.away {
				&:after {
					border-color: #e69200;
					background-color: #fcb316;
				}
			}
			&.busy {
				&:after {
					border-color: #9f0030;
					background-color: #D30230;
				}
			}
		}
		span.soon {
			color: #aaa;
		}
		a {
			color: fade( @quaternary-font-color, 50%);
			border-bottom-color: darken(@primary-background-color, 2%);
			&:hover {
				background-color: darken(@primary-background-color, 2%);
				color: fade( @quaternary-font-color, 75%);
			}
		}
	}
	&.active .info,
	.info:hover {
		h4 {
			color: fade(@quaternary-font-color, 85%);
		}
	}
	.hover & {
		.info h4 {
			color: fade(@quaternary-font-color, 85%);
		}
	}
}

// rooms-box
.flex-nav {
	//background-color: @primary-background-color;
	background-color: transparent;
	color: @tertiary-font-color;
	.custom-scroll(transparent, @custom-scrollbar-color);
	header {
		background-color: @primary-background-color;
	}
	footer {
		background-color: @primary-background-color;
	}
	.content {
		.custom-scroll(transparent, @custom-scrollbar-color);
		background-color: @primary-background-color;
	}
	.input-line {
		input[type='text'],
		input[type='password'],
		select {
			border-color: @tertiary-font-color;
			background-color: @primary-background-color;
			color: @input-font-color;
		}
		& label {
			color: @input-font-color;
		}
	}
	.selected-users {
		li {
			background-color: rgba(0, 0, 0, 0.1);
		}
	}
}

.side-nav {
	&:before {
		background-color: #dfdfdf;
	}
	.rooms-list {
		background-color: lighten(@primary-background-color, 2%);
		.custom-scroll(transparent, @custom-scrollbar-color);
	}
	.more {
		color: @tertiary-font-color;
		&:hover {
			background-color: rgba(0, 0, 0, 0.1);
		}
	}
	.input-error {
		color: #f09286;
	}
	.empty {
		color: @tertiary-font-color;
	}
	.header {
		color: #fff;
		background-color: @primary-background-color;
	}
	> .arrow {
		&.hover,
		&:hover {
			&:before,
			&:after {
				background-color: mix(@quaternary-font-color, @primary-background-color, 85%);
			}
		}
	}
	.footer {
		background: #fff;
		background-color: @primary-background-color;
		small {
			color: @tertiary-font-color;
		}
	}
	h3 {
		color: @tertiary-font-color;
		a {
			color: inherit;
		}
		&:hover {
			background-color: rgba(0, 0, 0, 0.1);
		}
	}
	.unread {
		background-color: @unread-notification-color;
		color: #FFF;
	}
	ul {
		li {
			.remove,
			.erase {
				color: #666;
			}
			&:hover {
				.opt {
					background-color: transparent;
				}
			}
			&.active {
				a {
					background-color: @active-channel-background-color;
					color: @active-channel-font-color;
				}
				.opt {
					background-color: transparent;
				}
			}
			&.has-alert {
				.name {
					color: @quaternary-font-color;
				}
			}
			&.away {
				a {
					color: #666;
				}
			}
		}
		a {
			color: @tertiary-font-color;
			&:hover {
				background-color: rgba(255, 255, 255, 0.05);
			}
		}
		.opt {
			background-color: transparent;
			i {
				color: fade(@quaternary-font-color, 50%);
				&:hover {
					color: fade(@quaternary-font-color, 75%);
				}
			}
		}
		i {
			color: fade(@quaternary-font-color, 35%);
		}
		input[type=text] {
			color: #000;
		}
	}
}

.page-container {
	.content {
		.custom-scroll(transparent, #EAEAEA);
	}
}

.fixed-title {
	background: #fff;
	border-bottom-color: @tertiary-background-color;
}

.cms-page {
	color: #444;
	background-color: @content-background-color;
}

.spotlight {
	background-color: rgba(0, 0, 0, .3);
	> .spotlight-input {
		color: #444;
		> i {
			color: #aaa;
		}
	}
}

.mobile-message-menu {
	background-color: rgba(0, 0, 0, .3);
}

.page-static {
	.content {
		.section {
			.section-content {
				border-color: #ddd;
			}
		}
	}
}

.page-list {
	.results {
		border-bottom-color: #DFDFDF;
		color: @secondary-font-color;
	}
	.list {
		a {
			color: @primary-font-color;
			border-bottom-color: @secondary-background-color;
			&:hover {
				background-color: @secondary-background-color;
			}
		}
		li {
			color: @secondary-font-color;
			&:after {
				background-color: @secondary-font-color;
			}
		}
		.info {
			a {
				color: @primary-font-color;
			}
		}
		.room-info {
			&:hover {
				background-color: @secondary-background-color;
			}
		}
		.status {
			color: @secondary-font-color;
		}
		table {
			tbody {
				tr:nth-child(odd) {
					background-color: @secondary-background-color;
				}
			}
		}
	}
}

.image-to-download {
	background-color: #fafafa;
	border-color: #ddd;
	color: #aaa;
}

.room-not-found {
	color: orange;
}

.container-bars {
	>div {
		border-color: #ffffff;
	}
	.upload-progress {
		background-color: #b2d5c9;
		color: @content-background-color;
		&.upload-error {
			background-color: #FF6161;
			border-color: #863737;
		}
		.upload-progress-progress {
			background-color: #4c9789;
		}
		> a {
			&:hover {
				color: #eee;
			}
		}
	}
	.unread-bar {
		background-color: #E6F4FD;
		color: #068FE4;
	}
}

// change to page-messages
.messages-container {
	.edit-room-title {
		color: @secondary-font-color;
		&:hover {
			color: @primary-font-color;
		}
	}
	.wrapper {
		.custom-scroll(transparent, rgba(180, 180, 180, .75));
	}
	.footer {
		background: #FCFCFC;
		border-top-color: @tertiary-background-color;
	}
	.message-popup {
		background: #FFF;
	}
	.message-popup-title {
		background-color: @secondary-background-color;
		border-bottom-color: #E7E7E7;
	}
	.popup-item {
		color: @secondary-font-color;
		&.selected {
			background-color: #4CAEEB;
			color: #FFF;
		}
	}
	.popup-user-status {
		border-color: rgba(0, 0, 0, .2);
	}
	.popup-user-status-system {
		border-color: transparent;
	}
	.popup-user-status-offline {
		background-color: @status-offline;
	}
	.popup-user-status-online {
		background-color: @status-online;
	}
	.popup-user-status-away {
		background-color: @status-away;
	}
	.popup-user-status-busy {
		background-color: @status-busy;
	}
	.message-form {
		> .message-input {
			border-color: #E7E7E7;
			> .file,
			.message-buttons {
				color: #888;
				background-color: #FCFCFC;
				&:hover {
					background-color: #F1F1F1;
					color: #666;
				}
			}
		}
		textarea {
			&.editing {
				background-color: #fff7d8;
			}
		}
		.users-typing {
			color: #888888;
			background: #FCFCFC;
		}
		.formatting-tips {
			color: #444444;
			q {
				border-left-color: #ccc;
			}
		}
		.editing-commands {
			.editing-commands-cancel {
				color: #888888;
			}
			.editing-commands-save {
				color: #888888;
			}
		}
	}
}

.messages-box {
	.load-more {
		span {
			border-color: #CCC;
			background-color: #EEE;
		}
	}
	.start {
		color: @secondary-font-color;
	}
	.new-message {
		background: #428bca;
		color: #FFF;
	}
	.editing {
		.body {
			background-color: #fff7d8;
		}
	}
}

.message {
	&.new-day {
		&:before {
			color: @secondary-font-color;
			background-color: @content-background-color;
		}
		&:after {
			border-top-color: #ddd;
		}
	}
	.user {
		color: #444444;
		&:hover {
			color: #333;
		}
	}
	.info {
		color: @info-font-color;
	}
	&.system {
		.body {
			color: @info-font-color;
			.attachment {
				color: @primary-font-color;
			}
		}
	}
	a {
		color: @link-font-color;
		&:hover {
			color: darken(@link-font-color, 10%);
		}
	}
}

// FLEX-TAB and FLEX-TAB views
.flex-tab {
	background-color: @secondary-background-color;
	border-left-color: @tertiary-background-color;
	.control {
		background-color: @secondary-background-color;
		&:before {
			background-color: @tertiary-background-color;
		}
		.more {
			background-color: @tertiary-background-color;
			border-bottom-color: @tertiary-background-color;
			color: @secondary-font-color;
			&:hover {
				.arrow {
					.arrow {
						&:before,
						&:after {
							background-color: #4a4a4a;
						}
					}
				}
			}
			.arrow {
				&:before,
				&:after {
					background-color: #7a7a7a;
				}
			}
			.flex-opened & {
				background-color: @secondary-background-color;
				&:hover {
					.arrow {
						&:before,
						&:after {
							background-color: #7a7a7a;
						}
					}
				}
			}
		}
		.search-form {
			.icon-plus {
				color: @secondary-font-color;
			}
		}
		.info-tabs {
			a {
				color: inherit;
				border-left-color: rgb(234, 234, 234);
				&.active {
					background-color: #F4F4F4;
				}
				&:last-child {
					border-right-color: rgb(234, 234, 234);
				}
			}
		}
	}
	.content {
		.custom-scroll(transparent, #DADADA);
		> div {
			background-color: @secondary-background-color;
		}
	}
	.message {
		&.new-day {
			&:before {
				background-color: @secondary-background-color;
			}
			&:after {
				border-top-color: @tertiary-background-color;
			}
		}
	}
}

.list-view {
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
	overflow-x: hidden;
	.custom-scroll(transparent, #DADADA);
	> .status {
		p {
			color: @secondary-font-color;
		}
		.see-all {
			color: @secondary-font-color;
			background-color: transparent;
		}
	}
}

.user-view {
	-webkit-overflow-scrolling: touch;
	.custom-scroll(transparent, #DADADA);
	.info {
		h3 {
			i.status-offline {
				&:after {
					border-color: darken(@status-offline, 5%);
					background-color: @status-offline;
				}
			}
			i.status-online {
				&:after {
					border-color: darken(@status-online, 5%);
					background-color: @status-online;
				}
			}
			i.status-away {
				&:after {
					border-color: darken(@status-away, 5%);
					background-color: @status-away;
				}
			}
			i.status-busy {
				&:after {
					border-color: darken(@status-busy, 5%);
					background-color: @status-busy;
				}
			}
		}
		p {
			color: @secondary-font-color;
		}
	}
	.stats {
		li {
			background-color: #e9e9e9;
		}
	}
	.box {
		h4 {}
		&:after {
			background-color: #CDCDCD;
		}
	}
	.tags {
		li {
			background-color: #CDCDCD;
		}
	}
	.links {
		a {
			color: #6f6f6f;
			&:hover {
				background-color: #e9e9e9;
				color: #333;
			}
		}
	}
	.channels {
		p {
			color: @secondary-font-color;
		}
		a {
			color: #6f6f6f;
		}
	}
	.edit-form {
		p {
			color: @secondary-font-color;
		}
	}
}

.user-image-status(@color) {
	.avatar {
		&:after {
			background-color: darken(@color, 5%);
		}
	}
}

.user-image {
	background-color: @tertiary-background-color;
	&:hover,
	&.selected {
		.avatar {
			&:after {}
			.status-offline {
				&:after {
					background-color: @status-offline;
				}
			}
			.status-online {
				&:after {
					background-color: @status-online;
				}
			}
			.status-away {
				&:after {
					background-color: @status-away;
				}
			}
			.status-busy {
				&:after {
					background-color: @status-busy;
				}
			}
			p {
				color: @primary-font-color;
			}
		}
	}
	.lines & {
		background-color: transparent;
		a {
			background-color: transparent;
		}
		p {
			color: @secondary-font-color;
		}
	}
	&.status-offline {
		.user-image-status(@status-offline);
	}
	&.status-online {
		.user-image-status(@status-online);
	}
	&.status-away {
		.user-image-status(@status-away);
	}
	&.status-busy {
		.user-image-status(@status-busy);
	}
}

.user-profile {
	.info {
		a {
			color: @primary-font-color;
			&:hover {
				color: @secondary-font-color;
			}
		}
	}
}

.rocket-modal {
	background-color: rgba(0, 0, 0, 0.5);
	&.fluid {
		.modal {
			main {
				.custom-scroll(transparent, #CFCFCF);
			}
		}
	}
	legend {
		color: @secondary-font-color;
		&:before {
			background-color: #dfdfdf;
		}
	}
	.modal {
		background-color: @content-background-color;
		header {
			background-color: #DADADA;
			.close {
				i {
					color: @secondary-font-color;
				}
				&:hover {
					i {
						color: @primary-font-color;
					}
				}
			}
		}
		main {
			background-color: @content-background-color;
		}
		footer {
			background-color: #eaeaea;
		}
	}
}

#login-card {
	background-color: #FAFAFA;
	h2 {
		color: @primary-font-color;
		&.error {
			color: #b40202;
		}
	}
	h3 {
		&.error {
			color: #b40202;
		}
	}
	a {
		color: @primary-background-color;
		&:active {
			color: @primary-background-color;
		}
		&:hover {
			color: darken(@primary-background-color, 10%);
		}
	}
	.input-text {
		input {
			background-color: transparent;
			border-bottom-color: #DFDFDF;
			&.error {
				border-bottom-color: #b40202;
				&::-webkit-input-placeholder {
					color: #b40202;
				}
				&:-moz-placeholder {
					color: #b40202;
				}
				/* Firefox 18- */
				&::-moz-placeholder {
					color: #b40202;
				}
				/* Firefox 19+ */
				&:-ms-input-placeholder {
					color: #b40202;
				}
			}
		}
		input:-webkit-autofill {
			color: @content-background-color !important;
		}
		input:-webkit-autofill {
			background-color: transparent !important;
		}
	}
}

.full-page {
	background-color: darken(@primary-background-color, 10%);
	.background-image(linear-gradient(darken(@primary-background-color, 10%), @primary-background-color));
	.text {
		color: #FFF;
		.button {
			background-color: #bc2031;
			color: #FFF;
		}
	}
	footer {
		color: #fff;
		div.switch-language {
			a {
				color: @secondary-font-color;
			}
		}
	}
}

.avatar-suggestion-item {
	background-color: @secondary-background-color;
	border-color: darken(@secondary-background-color, 10%);
	.avatar {
		background-size: cover;
		background-color: @tertiary-background-color;
	}
	.question-mark {
		&::before {
			color: darken(@tertiary-background-color, 10%);
		}
	}
}

.statistics-table {
	border-color: #eee;
}

@media all and(max-width: 780px) {
	#rocket-chat {
		.main-content {
			background-color: @content-background-color;
		}
	}
}

.dropzone {
	&.over .dropzone-overlay {
		background-color: rgba(0, 0, 0, 0.5);
		color: @content-background-color;
		> div {
			background-color: rgba(0, 0, 0, 0.6);
		}
	}
}

.is-cordova {
	.flex-tab {
		button.more {
			background-color: #fff;
		}
	}
}

.attention-message {
	color: white;
}

.green {
	color: green;
}
