/* Apps / Dash */

/* apps / folders / apps & folders in search */
.app-well-app .overview-icon,
.app-well-app.app-folder,
.grid-search-result .overview-icon,
.app-folder.grid-search-result .overview-icon,
#dash .dash-item-container .overview-tile .overview-icon,
#dash .dash-item-container .show-apps .overview-icon, /* 46+ */
.overview-tile { /* 46+ */
	box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0); /* fix default dash focused box-shadow*/
	transition-duration: 100ms;
	border-radius: 20px;
	color: TEXT-PRIMARY-COLOR;
	background-color: transparent;
}

#dashtodockContainer #dash .overview-tile .overview-icon {
	border-radius: 16px;
} 

#dash .dash-item-container .overview-tile:hover,
#dash .dash-item-container .overview-tile:focus,
#dash .dash-item-container .overview-tile:selected {
	background-color: transparent;
	box-shadow: none;
}

/* Show Apps icon */
.show-apps .overview-icon {
	color: SHOW-APPS-ICON-COLOR;
}

/* folders */
.app-well-app.app-folder .overview-icon,
.app-folder /* 46+ */ {
	background-color: ACCENT-DISABLED_HOVER;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}


.app-well-app:hover .overview-icon,
.app-well-app:focus .overview-icon,
.app-well-app:selected .overview-icon,
.show-apps:hover .overview-icon,
.show-apps:focus .overview-icon,
.overview-tile:hover,
.overview-tile:focus,
.overview-tile:selected {
	background-color: ACCENT-DISABLED-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

.overview-tile:focus {
	box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
}

/* app icons effects in dash */
#dash .app-well-app:hover .overview-icon,
#dash .app-well-app:focus .overview-icon,
#dash .app-well-app:selected .overview-icon,
#dash .show-apps:hover .overview-icon,
#dash .show-apps:focus .overview-icon,
#dash .dash-item-container .overview-tile:hover .overview-icon, /* 46+ */
#dash .dash-item-container .overview-tile:focus .overview-icon, /* 46+ */
#dash .dash-item-container .overview-tile:selected .overview-icon, /* 46+ */
#dash .dash-item-container .show-apps:checked .overview-icon {
	box-shadow: inset 0 0 4px 1px WELL-APP-SELECTED;
	background-color: rgba(255, 255, 255, 0.1);
}

/* effect when creating new folder */
.app-well-app:drop .overview-icon,
.grid-search-result:drop .overview-icon,
.app-well-app.app-folder:drop .overview-icon,
.app-folder.grid-search-result:drop .overview-icon,
.overview-tile:drop { /* 46+ */
	box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR;
	background-color: ACCENT-OPACITY-COLOR;
}


/* Collapsed folders */

/* collapsed folder dialog */
.app-folder-dialog {
	border-radius: 32px;
	background-color: BACKGROUND-COLOR;
	border: none;
	padding: 0; /* because of icon grid */
	box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW;
}

/* folder title */
.app-folder-dialog .folder-name-container .folder-name-label {
	padding: 5px 7px;
	color: TEXT-PRIMARY-COLOR;
	font-weight: 700;
	transition-duration: 100ms;
}

/* folder title when editing */
.app-folder-dialog .folder-name-container .folder-name-entry {
	font-weight: 700;
	border: none;
	box-shadow: inset 0 0 0 1px TEXT-DISABLED-COLOR !important;
	background-color: ACCENT-DISABLED-COLOR;
	selection-background-color: ACCENT-COLOR;
	selected-color: TEXT-PRIMARY-COLOR;
}

/* edit folder name button */
.app-folder-dialog .folder-name-container .edit-folder-button,
.app-folder-dialog .icon-button { /* 46+ */
	border-radius: 12px;
	background-color: ACCENT-DISABLED-COLOR;
	color: TEXT-PRIMARY-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

.app-folder-dialog .folder-name-container .edit-folder-button:hover,
.app-folder-dialog .icon-button:hover {
	background-color: ACCENT-DISABLED_HOVER;
}

.app-folder-dialog .folder-name-container .edit-folder-button:focus,
.app-folder-dialog .icon-button:focus {
	box-shadow: inset 0 0 0 2px ACCENT-SECONDARY-COLOR !important;
}


.page-indicator .page-indicator-icon {
	border-radius: 99px;
	background-color: TEXT-SECONDARY-COLOR;
}


/* Page arrow */
.page-navigation-arrow {
	border-radius: 15px;
	padding: 12px;
	transition-duration: 100ms;
	background-color: transparent;
}

.page-navigation-arrow > StIcon {
	margin: 0;
	color: TEXT-PRIMARY-COLOR;
}

.page-navigation-arrow:hover {
	background-color: ACCENT-DISABLED-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

.page-navigation-arrow:hover > StIcon {
	color: TEXT-PRIMARY-COLOR;
	background-color: rgba(0, 0, 0, 0);
}

.page-navigation-arrow:active {
	background-color: ACCENT-DISABLED_HOVER;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}


/* left and right hints on edges of the screen when dragging app icon */
.page-navigation-hint.next:ltr,
.page-navigation-hint.previous:rtl {
	background-gradient-start: PAGE-NAV-HINT;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}

.page-navigation-hint.previous:ltr,
.page-navigation-hint.next:rtl {
	background-gradient-end: PAGE-NAV-HINT;
	box-shadow: inset 0 0 0 1px BORDER-SHADOW;
}


/* Dash */

#dash .dash-background {
	background-color: DASH-COLOR;
	box-shadow: inset 0 0 0 1px BORDER-MENU-SHADOW;
	border: none; /* remove black border on ubuntu */
	padding: 4px 2px 4px 2px;
	border-radius: 23px;
}

/* if used Dash to Dock extension */
#dashtodockContainer #dash .dash-background {
	border: none;
	border-radius: 18px;
	transition-duration: 250ms;
}

/* when dash in overview */
#dashtodockContainer.overview #dash .dash-background {
	box-shadow: inset 0 0 0 1.5px BORDER-MENU-SHADOW;
	background-color: DASH_OVERVIEW;
}

/* popup label when hovering the app in dash */
.dash-label {
	background-color: SECTION-OPAQUE-COLOR;
	color: TEXT-PRIMARY-COLOR;
	border-radius: 12px;
	border: 1px solid BORDER-MENU-SHADOW;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
}


/* pill below if app is running */
.app-well-app-running-dot,
.app-grid-running-dot { /* 46+ */
	width: 10px;
	height: 4px;
	border-radius: 2px;
	background: ACCENT-SECONDARY-COLOR;
}

#dash .app-grid-running-dot {
	margin-bottom: 0 !important;
	offset-y: -4px !important;
}

#dash .app-well-app:hover .app-well-app-running-dot,
#dash .overview-tile:hover .app-grid-running-dot { /* 46+ */
	width: 15px;
}

#dashtodockContainer .app-well-app.focused .app-well-app-running-dot,
#dashtodockContainer .overview-tile.focused .app-grid-running-dot { /* 46+ */
	width: 20px;
}

/* pill when default dash (not dash to dock) */
#dash .app-well-app-running-dot {
	margin-bottom: 6px;
}


/* elements in dash */
.dash-item-container .app-well-app .overview-icon,
.dash-item-container .show-apps .overview-icon {
	border-radius: 21px;
}


/* pinned apps | running apps */
.dash-separator {
	box-shadow: 0 0 0 0.25px TEXT-DISABLED-COLOR;
}


/* ubuntu fix */
#dashtodockContainer #dash .app-well-app:hover .overview-icon,
#dashtodockContainer #dash .app-well-app:focus .overview-icon,
#dashtodockContainer #dash .app-well-app:selected .overview-icon,
#dashtodockContainer #dash .show-apps:hover .overview-icon,
#dashtodockContainer #dash .show-apps:focus .overview-icon,
#dashtodockContainer .show-apps:selected .overview-icon,
#dashtodockContainer .show-apps:selected:hover .overview-icon,
#dashtodockContainer .show-apps:active .overview-icon,
#dashtodockContainer .show-apps:checked .overview-icon,
#dashtodockContainer .app-well-app.focused .overview-icon {
	border-radius: 15px;
}

#dashtodockContainer .app-well-app.focused .overview-icon,
#dashtodockContainer .overview-tile.focused .overview-icon, /* 46+ dash to dock focused window */
.show-apps:selected .overview-icon,
.show-apps:selected:hover .overview-icon,
.show-apps:active .overview-icon,
.show-apps:checked .overview-icon {
	box-shadow: inset 0 0 4px 1px WELL-APP-SELECTED;
}

/* ubuntu fix */
#dashtodockContainer.bottom.extended #dash .dash-background,
#dashtodockContainer.bottom.extended.dashtodock #dash .dash-background,
#dashtodockContainer.bottom.extended.shrink #dash .dash-background,
#dashtodockContainer.top.extended #dash .dash-background,
#dashtodockContainer.top.extended.dashtodock #dash .dash-background,
#dashtodockContainer.top.extended.shrink #dash .dash-background,
#dashtodockContainer.left.extended #dash .dash-background,
#dashtodockContainer.left.extended.dashtodock #dash .dash-background,
#dashtodockContainer.left.extended.shrink #dash .dash-background,
#dashtodockContainer.right.extended #dash .dash-background,
#dashtodockContainer.right.extended.dashtodock #dash .dash-background,
#dashtodockContainer.right.extended.shrink #dash .dash-background {
	border-radius: 0;
	background-color: DASH-COLOR;
	box-shadow: none;
	transition-duration: 250ms;
}

/* animation fix when extended dash */
#dashtodockContainer.bottom.extended.overview #dash .dash-background,
#dashtodockContainer.bottom.extended.overview.dashtodock #dash .dash-background,
#dashtodockContainer.bottom.extended.overview.shrink #dash .dash-background,
#dashtodockContainer.top.extended.overview #dash .dash-background,
#dashtodockContainer.top.extended.overview.dashtodock #dash .dash-background,
#dashtodockContainer.top.extended.overview.shrink #dash .dash-background,
#dashtodockContainer.left.extended.overview #dash .dash-background,
#dashtodockContainer.left.extended.overview.dashtodock #dash .dash-background,
#dashtodockContainer.left.extended.overview.shrink #dash .dash-background,
#dashtodockContainer.right.extended.overview #dash .dash-background,
#dashtodockContainer.right.extended.overview.dashtodock #dash .dash-background,
#dashtodockContainer.right.extended.overview.shrink #dash .dash-background {
	background-color: BACKGROUND-COLOR;
}
