/* Screenshot UI */

/* main screenshot panel section */
.screenshot-ui-panel {
	color: TEXT-PRIMARY-COLOR;
	background-color: BACKGROUND-COLOR;
	border: 1px solid BORDER-MENU-SHADOW;
	border-radius: 22px;
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07);
}

.screenshot-ui-show-pointer-button, /* show pointer */
.screenshot-ui-type-button { /* Selection / Screen / Window */
	color: TEXT-PRIMARY-COLOR;
	background-color: transparent;
	border-radius: 15px;
	transition-duration: 100ms;
}

.screenshot-ui-show-pointer-button:hover,
.screenshot-ui-type-button:hover,
.screenshot-ui-show-pointer-button:focus,
.screenshot-ui-type-button:focus {
	background: ACCENT-DISABLED-COLOR;
	color: TEXT-PRIMARY-COLOR;
}

.screenshot-ui-show-pointer-button:hover,
.screenshot-ui-type-button:hover,
.screenshot-ui-show-pointer-button:active,
.screenshot-ui-type-button:active {
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

.screenshot-ui-show-pointer-button:checked,
.screenshot-ui-type-button:checked,
.screenshot-ui-show-pointer-button:checked:hover,
.screenshot-ui-type-button:checked:hover,
.screenshot-ui-show-pointer-button:checked:focus,
.screenshot-ui-type-button:checked:focus {
	background-color: ACCENT-DISABLED_HOVER;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
	color: TEXT-PRIMARY-COLOR;
}

.screenshot-ui-show-pointer-button:insensitive,
.screenshot-ui-type-button:insensitive {
	color: TEXT-DISABLED-COLOR;
}


/* window selection backround */
.screenshot-ui-window-selector {
	background-color: SECTION-OPAQUE-COLOR;
}

.screenshot-ui-window-selector-window-border {
	border-radius: 16px;
}

/* window border when selecting */
.screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border {
	border-color: BUTTON-COLOR;
}

.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border {
	border-color: BUTTON-COLOR;
	background-color: ACCENT-OPACITY-COLOR;
}

.screenshot-ui-window-selector-check { color: transparent; }

/* check icon when selected window */
.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check {
	color: BUTTON-TEXT-COLOR;
	background-color: BUTTON-COLOR;
	border-radius: 99px;
}


/* circle around capture button */
.screenshot-ui-capture-button {
	width: 36px;
	height: 36px;
	border-radius: 99px;
	border: 4px ACCENT-SECONDARY-COLOR;
	padding: 4px;
}

/* capture button */
.screenshot-ui-capture-button .screenshot-ui-capture-button-circle {
	background-color: ACCENT-SECONDARY-COLOR;
	transition-duration: 100ms;
	border-radius: 99px;
}

.screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover,
.screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus {
	background-color: ACCENT-SECONDARY_HOVER;
}

.screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle,
.screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle {
	background-color: ACCENT-SECONDARY_HOVER;
}

/* capture button when Screencast */
.screenshot-ui-capture-button:cast .screenshot-ui-capture-button-circle {
	background-color: #c01c28;
}

.screenshot-ui-capture-button:cast:hover .screenshot-ui-capture-button-circle,
.screenshot-ui-capture-button:cast:focus .screenshot-ui-capture-button-circle {
	background-color: #d61f2d;
}

.screenshot-ui-capture-button:cast:active .screenshot-ui-capture-button-circle {
	background-color: #a11722;
}


/* screenshot / screencast buttons section */
.screenshot-ui-shot-cast-container {
	background-color: ACCENT-DISABLED-COLOR;
	border-radius: 99px;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

/* screenshot / screencast buttons */
.screenshot-ui-shot-cast-button {
	background-color: transparent;
	border-radius: 99px;
	transition-duration: 100ms;
}

.screenshot-ui-shot-cast-button:hover,
.screenshot-ui-shot-cast-button:focus,
.screenshot-ui-shot-cast-button:active {
	background-color: ACCENT-DISABLED_HOVER;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

.screenshot-ui-shot-cast-button:checked {
	background-color: ACCENT-SECONDARY-COLOR;
	color: TEXT-INVERTED-COLOR;
}

.screenshot-ui-area-indicator-shade {
	background-color: rgba(0, 0, 0, 0.5);
}

/* screen selection borders */
.screenshot-ui-area-selector-handle {
	border-radius: 99px;
	background-color: white;
	box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.05);
}


.screenshot-ui-screen-selector {
	background-color: rgba(0, 0, 0, 0.5); 
}
.screenshot-ui-screen-selector:hover {
	background-color: rgba(0, 0, 0, 0.3); 
}
.screenshot-ui-screen-selector:active {
	background-color: rgba(0, 0, 0, 0.7); 
}
.screenshot-ui-screen-selector:checked {
	background-color: transparent;
}
  


/* tooltip for elements */
.screenshot-ui-tooltip {
	color: TEXT-PRIMARY-COLOR;
	background-color: SECTION-OPAQUE-COLOR;
	padding: 6px 12px;
	border: 1px solid BORDER-SHADOW;
	border-radius: 12px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
}


.window-close, /* close button (Overview - Workspaces - Selected window) */
.screenshot-ui-close-button { /* close button (Screenshot UI) */
	background-color: BUTTON-CLOSE-COLOR;
	color: TEXT-PRIMARY-COLOR;
	border: 1px solid BORDER-SHADOW;
	border-radius: 99px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
	transition-duration: 100ms;
}

.window-close:hover,
.screenshot-ui-close-button:hover {
	background-color: BUTTON-CLOSE_HOVER;
}