/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-workbench .feedback-form {
	width: 420px;
	top: 30px;
	right: 6px;
	padding: 1em;
	cursor: default;
}

.monaco-workbench .feedback-form h2 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: 1.8em;
}

.monaco-workbench .feedback-form h3 {
	margin: 1em 0 0;
	padding: 0;
	font-weight: normal;
	font-size: 1.2em;
}

.monaco-workbench .feedback-form .content {
	font-size: 1.2em;
}

.monaco-workbench .feedback-form .content > div {
	display: inline-block;
	vertical-align: top;
	margin-top: 20px;
}

.monaco-workbench .feedback-form .content .contactus {
	padding: 10px;
	float: right;
}

.monaco-workbench .feedback-form .content .channels {
	margin-top: 5px;
	font-size: 0.9em;
}

.monaco-workbench .char-counter {
	padding-left: 3px;
}

.monaco-workbench .feedback-form .content .channels a {
	padding: 2px 0;
}

.monaco-workbench .feedback-form .content .channels a:hover {
	text-decoration: underline;
}

.monaco-workbench .feedback-form .feedback-alias, .monaco-workbench .feedback-form .feedback-description {
	resize: none;
	font-size: 1.1em;
	margin: 6px 0 0;
	width: 100%;
	padding: 3px 2px;
	box-sizing:			border-box;
}

.monaco-workbench .feedback-form .feedback-empty {
	margin-top: .2em;
}

.monaco-workbench .feedback-form .feedback-alias-checkbox {
	display: inline-block;
	vertical-align: text-top;
	margin-left: 0;
}

.monaco-workbench .feedback-form .feedback-alias {
	height: 26px;
}

.monaco-workbench .feedback-form .feedback-alias:disabled {
	opacity: 0.6;
}

.monaco-workbench .feedback-form .cancel {
	position: absolute;
	top: 0;
	right: 0;
	padding: .5em;
	width: 22px;
	height: 22px;
	border: none;
	cursor: pointer;
}

.monaco-workbench .feedback-form .form-buttons {
	margin-top: 18px;
	text-align: right;
}

.monaco-workbench .feedback-form .sentiment {
	height: 32px;
	width: 32px;
	display: inline-block;
	margin: .5em 0;
	cursor: pointer;
	box-sizing:			border-box;
}

.monaco-workbench .feedback-form .sentiment:hover {
	background-color: #eaeaea;
}

/* Theming */
.vs .monaco-workbench .feedback-form .feedback-alias, .vs .monaco-workbench .feedback-form .feedback-description {
	font-family: inherit;
	border: 1px solid transparent;
}

.vs .monaco-workbench .feedback-form .cancel {
	background: url('close.svg') center center no-repeat;
}

.monaco-workbench .feedback-form .form-buttons {
	display: flex;
}

.monaco-workbench .feedback-form .form-buttons .hide-button-container {
	display: flex;
}

.monaco-workbench .feedback-form .form-buttons .hide-button-container input,
.monaco-workbench .feedback-form .form-buttons .hide-button-container label {
	align-self: center;
}

.monaco-workbench .feedback-form .form-buttons .send {
	width: auto;
	background-image: url('twitter.svg');
	background-position: 12px center;
	background-size: 20px;
	background-repeat: no-repeat;
	padding: 8px 12px 8px 38px;
	margin-left: auto;
	transition: width 200ms ease-out;
}

.monaco-workbench .feedback-form .form-buttons .send.in-progress,
.monaco-workbench .feedback-form .form-buttons .send:hover {
	background-color: #006BB3;
}

.monaco-workbench .feedback-form .form-buttons .send:disabled {
	pointer-events: none;
	cursor: not-allowed;
	opacity: .65;
}

.monaco-workbench .feedback-form .form-buttons .send.success {
	background-color: #2d883e;
}

.monaco-workbench .feedback-form .form-buttons .send.error {
	background-color: #E51400;
}

.vs-dark .monaco-workbench .feedback-form h3 {
	font-weight: normal;
	font-size: 1.2em;
}

.vs-dark .monaco-workbench .feedback-form .sentiment:hover {
	background-color: rgba(30,30,30,0.8);
}

.vs-dark .monaco-workbench .feedback-form .feedback-alias, .vs-dark .monaco-workbench .feedback-form .feedback-description {
	font-family: inherit;
}

.vs-dark .monaco-workbench .feedback-form .cancel,
.hc-black .monaco-workbench .feedback-form .cancel {
	background: url('close-dark.svg') center center no-repeat;
}

.monaco-workbench .feedback-form .sentiment.smile {
	background-image: url('happy.svg');
	background-position: center;
	background-repeat: no-repeat;
}

.monaco-workbench .feedback-form .sentiment.frown {
	background-image: url('sad.svg');
	background-position: center;
	background-repeat: no-repeat;
}

.monaco-workbench .feedback-form .infotip {
	background-image: url('info.svg');
	background-position: center;
	background-repeat: no-repeat;

	height: 16px;
	width: 16px;
	display: inline-block;
	vertical-align: text-bottom;
	box-sizing:	border-box;
	margin-left: 5px;
}

/* High Contrast Theming */
.hc-black .monaco-workbench .feedback-form {
	outline: 2px solid #6fc3df;
	outline-offset: -2px;
}

.hc-black .monaco-workbench .feedback-form .feedback-alias, .hc-black .monaco-workbench .feedback-form .feedback-description {
	font-family: inherit;
}

.hc-black .monaco-workbench .feedback-form .content .contactus {
	padding: 10px;
	float: right;
}

.hc-black .monaco-workbench .feedback-form .form-buttons .send,
.hc-black .monaco-workbench .feedback-form .form-buttons .send.in-progress,
.hc-black .monaco-workbench .feedback-form .form-buttons .send.success {
	background-color: #0C141F;
	color: #D4D4D4;
	border: 1px solid #6FC3DF;
}

.hc-black .monaco-workbench .feedback-form .form-buttons .send:hover {
	background-color: #0C141F;
}


.monaco-workbench .feedback-form .infotip {
	background: none;
}

.monaco-workbench .feedback-form .infotip:before {
	content: url('info.svg');
	height: 16px;
	width: 16px;
	display: inline-block;
}