ui/file_manager/file_manager/foreground/css/file_manager.css

/* Copyright 2014 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* Special attribute used in HTML to hide elements. */
body:not([type]) [visibleif] {
  display: none;
}

body[type='folder'] [invisibleif~='folder'],
body[type='upload-folder'] [invisibleif~='upload-folder'],
body[type='saveas-file'] [invisibleif~='saveas-file'],
body[type='open-file'] [invisibleif~='open-file'],
body[type='open-multi-file'] [invisibleif~='open-multi-file'],
body[type='full-page'] [invisibleif~='full-page'],

body[type='folder'] [visibleif]:not([visibleif~='folder']),
body[type='upload-folder'] [visibleif]:not([visibleif~='upload-folder']),
body[type='saveas-file'] [visibleif]:not([visibleif~='saveas-file']),
body[type='open-file'] [visibleif]:not([visibleif~='open-file']),
body[type='open-multi-file'] [visibleif]:not([visibleif~='open-multi-file']),
body[type='full-page'] [visibleif]:not([visibleif~='full-page']) {
  display: none !important;
}

html {
  height: 100%;
  overflow: hidden;
}

html.col-resize * {
  cursor: col-resize !important;
}

/* Outer frame of the dialog. */
body {
  -webkit-tap-highlight-color: transparent;
  cursor: default;
  display: flex;
  flex: auto;
  flex-direction: column;
  font-size: 13px;
  height: 100%;
  margin: 0;
  padding: 0;
  user-select: none;
  width: 100%;
}

/* Drop opacity of selected rows to give a visual feedback on copy/cut
 * operation. */
.blink {
  opacity: 0.8;
}

/* Main part of the dialog between header and footer. */
.dialog-container {
  align-items: stretch;
  background-color: var(--cros-bg-color);
  display: flex;
  flex: auto;
  flex-direction: row;
  overflow: hidden;
  position: relative;
}

/* List and grid are inside this container. */
.dialog-main {
  align-items: stretch;
  background-color: inherit;
  display: flex;
  flex: auto;
  flex-direction: column;
}

/* Directory tree at the left. */
.dialog-navigation-list {
  background-color: inherit;
  border-inline-end: none;
  display: flex;
  flex: none;
  flex-direction: column;
  max-width: 40%;
  min-width: 105px;
  overflow: auto;
  position: relative;
  width: 240px;
}

.dialog-navigation-list-contents {
  display: flex;
  flex: 1 1 auto;
  margin-top: 8px;
  position: relative;
}

#directory-tree {
  bottom: 0;
  flex: none;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;   /* TODO(adanilo): crbug.com/212268 still needed? */
  right: 0;
  top: 0;
}

html.col-resize #directory-tree,
html.breadcrumb-elider-expanded #directory-tree {
  overflow-y: hidden;
}

/* Can be removed after new directory replacement. -- BEGIN */

#directory-tree .tree-item[section-start]::before {
  border-bottom: 1px solid var(--cros-separator-color);
  content: '';
  display: block;
  margin: 8px 0;
  width: 100%;
}

#directory-tree .tree-row {
  cursor: pointer;
  height: auto;
  padding: 4px 0;
}

#directory-tree .tree-row > .file-row {
  align-items: center;
  border: 2px solid transparent;
  border-inline-start-width: 0 !important;
  border-radius: 0 20px 20px 0;
  box-sizing: border-box;
  color: var(--cros-text-color-primary);
  display: flex;
  height: 32px;
  margin-inline-end: 6px;
}

html[dir='rtl'] #directory-tree .tree-row > .file-row {
  border-radius: 20px 0 0 20px;
}

#directory-tree .tree-row > .expand-icon {
  flex: none;
  height: 36px;
  left: 3px;
  margin: -12px -2px;
  right: 3px;
  top: 0;
  width: 36px;
}

#directory-tree .tree-row > .file-row > .expand-icon {
  box-sizing: border-box;
  flex: none;
  height: 32px;
  padding: 6px;
  width: 32px;
}

#directory-tree .tree-row > .item-icon {
  flex: none;
  height: 16px;
  width: 16px;
}

#directory-tree .tree-row > .file-row > .item-icon {
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--cros-icon-color-primary);
  background-image: none;
  flex: none;
  height: 20px;
  left: -4px;
  position: relative;
  right: -4px;
  width: 20px;
}

#directory-tree .tree-item:not([disabled])
  .tree-row[active] > .file-row > .item-icon:not([style*='background-image']) {
  background-color: var(--cros-icon-color-selection);
}

#directory-tree .tree-row > .file-row > .item-icon[style*='background-image'] {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

#directory-tree .tree-row > .label {
  display: block;
  flex: auto;
  font-weight: 500;
  margin: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#directory-tree .tree-row > .file-row > .label {
  display: block;
  flex: auto;
  font-weight: 500;
  margin: 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#directory-tree .tree-row .rename-placeholder {
  flex: auto;
  font-weight: 500;
}

#directory-tree .tree-row > .rename-placeholder {
  display: block;
  margin: 0 6px;
}

#directory-tree .tree-row .rename-placeholder > input {
  width: 100%;
}

#directory-tree [renaming] .root-eject {
  display: none;
}

#directory-tree [renaming] > .tree-row > .label,
#directory-tree [renaming] > .tree-row > .file-row > .label {
  display: none;
}

#directory-tree .tree-row > input {
  display: none;
  margin: 0 6px;
  overflow: hidden;
}

#directory-tree .tree-row > .file-row > input {
  display: none;
  margin: 0 10px;
  overflow: hidden;
}

#directory-tree [renaming] > .tree-row > input,
#directory-tree [renaming] > .tree-row > .file-row > input {
  display: block;
}

html:not(.col-resize) #directory-tree .tree-item:not([disabled]) >
    .tree-row:not([active]):not([selected]):hover > .file-row {
  background-color: var(--cros-ripple-color);
}

html.pointer-active #directory-tree .tree-item:not([disabled]) >
    .tree-row:not([active]):not([selected]) > .file-row:active {
  background-color: var(--cros-ripple-color);
}

html.pointer-active #directory-tree
    .tree-row:not([active]):not([selected]):hover > .file-row:not(:active) {
  background-color: unset;
}

html.pointer-active #directory-tree :not(:active) {
  cursor: default;
}

html.drag-drop-active #directory-tree .tree-item.denies > .tree-row > .file-row {
  background-color: var(--cros-highlight-color-error);
}

html.drag-drop-active #directory-tree .tree-item.accepts > .tree-row > .file-row {
  background-color: var(--cros-ripple-color);
}

html.focus-outline-visible #directory-tree:focus .tree-row[selected] > .file-row {
  border: 2px solid var(--cros-focus-ring-color);
}

#directory-tree .tree-item:not([disabled]) .tree-row[active] > .file-row {
  background-color: var(--cros-highlight-color);
  color: var(--cros-text-color-selection);
}

#directory-tree .tree-item[disabled] > .tree-row {
  cursor: default;
}

#directory-tree .tree-row > .align-right-icon {
  --iron-icon-height: 16px;
  --iron-icon-width: 16px;
  border-style: none;
  flex: none;
  height: 40px;
  position: relative;
  width: 40px;
  z-index: 1;
}

#directory-tree .tree-row > .file-row > .align-right-icon {
  --iron-icon-height: 20px;
  --iron-icon-width: 20px;
  border-radius: 16px;
  border-style: none;
  box-sizing: border-box;
  flex: none;
  height: 32px;
  left: 1px;
  position: relative;
  right: 1px;
  width: 32px;
  z-index: 1;
}

#directory-tree .tree-row > .external-link-icon iron-icon {
  padding: 12px;
}

#directory-tree .tree-row > .file-row > .external-link-icon iron-icon {
  padding: 6px;
}

#directory-tree .tree-row > .root-eject {
  --text-color: currentColor;
  min-width: 40px;
  padding: 12px;
}

#directory-tree .tree-row > .file-row > .root-eject {
  --text-color: currentColor;
  --hover-bg-color: var(--cros-ripple-color);
  min-width: 32px;
  padding: 0;
}

html.col-resize #directory-tree .tree-row > .root-eject:hover {
  --hover-bg-color: none;
}

html.col-resize #directory-tree .tree-row > .file-row > .root-eject:hover {
  --hover-bg-color: none;
}

#directory-tree .tree-row > .root-eject:focus {
  outline: 1px auto var(--cros-focus-ring-color);
}

#directory-tree .tree-row > .file-row > .root-eject:focus {
  border: 1px solid var(--cros-focus-ring-color);
}

#directory-tree .tree-row > .root-eject:active {
  border-radius: 20px;
  outline-width: 0;
}

#directory-tree .tree-row > .file-row > .root-eject:active {
  --ink-color: var(--cros-ripple-color);
  border-width: 0;
}

#directory-tree .root-item[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* Can be removed after new directory replacement. -- END */

/* These changes are for the new directory to work with FilesLegacy style. */
#directory-tree .align-right-icon {
  --iron-icon-height: 20px;
  --iron-icon-width: 20px;
  border-radius: 16px;
  border-style: none;
  box-sizing: border-box;
  flex: none;
  height: 32px;
  left: 1px;
  position: relative;
  right: 1px;
  width: 32px;
  z-index: 1;
}

#directory-tree .root-eject {
  --text-color: currentColor;
  --hover-bg-color: var(--cros-ripple-color);
  min-width: 32px;
  padding: 0;
}

html.col-resize #directory-tree .root-eject:hover {
  --hover-bg-color: none;
}

#directory-tree .root-eject:focus {
  outline: 1px auto var(--cros-focus-ring-color);
}

#directory-tree .root-eject:active {
  --ink-color: var(--cros-ripple-color);
  border-radius: 20px;
  outline-width: 0;
}

#directory-tree .external-link-icon iron-icon {
  padding: 6px;
}

/* A vertical splitter between the directory tree and the file list. It is
   a transparent area centered on the directory tree right border. */
div.splitter {
  align-items: center;
  cursor: col-resize;
  display: flex;
  flex: none;
  justify-content: center;
  margin: 0;
  margin-inline-end: calc(16px - 6px);
  position: relative;
  width: 32px;
  z-index: 500;  /* Must be below the contextmenu (600). */
}

div.splitter .splitter-button {
  --hover-bg-color: var(--cros-ripple-color);
  --ink-color: var(--cros-ripple-color);
  --ripple-opacity: 100%;
  border: none;
  border-radius: 50%;
  cursor: col-resize;
  height: 32px;
  min-width: 32px;
  padding: 0;
  width: 32px;
}

html.pointer-active div.splitter:not(.splitter-active):hover {
  cursor: default;
}

html.col-resize div.splitter:not(.splitter-active) .splitter-button:hover {
  --hover-bg-color: none;
}

html.pointer-active div.splitter:not(.splitter-active) .splitter-button:not(:active):hover {
  --hover-bg-color: none;
  cursor: default;
}

div.splitter.splitter-active .splitter-button:active:not(:hover) {
  background-color: var(--cros-ripple-color);
}

div.splitter.splitter-active .splitter-button:not(:active) {
  background-color: var(--cros-icon-button-pressed-color);
}

div.splitter .splitter-button .icon {
  -webkit-mask-image: url(../images/common/dragger.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  /* TODO(crbug.com/1268206): the icon is not in disabled state */
  background-color: var(--cros-icon-color-disabled);
  height: 20px;
  padding: 6px;
  width: 20px;
}

html.pointer-active div.splitter:not(.splitter-active) .splitter-button:not(:active):hover .icon {
  cursor: default;
}

/* Breadcrumbs and things under the title but above the list view. */
.dialog-header {
  align-items: center;
  background: none;
  border-bottom: 1px solid var(--cros-separator-color);
  box-sizing: border-box;
  color: var(--cros-text-color-secondary);
  display: flex;
  flex: none;
  flex-direction: row;
  font-size: 14px;
  height: 57px;
  overflow: hidden;
  transition: background 220ms ease;
}

body.check-select .dialog-header {
  border-bottom: 1px solid var(--cros-separator-color);
  border-top: 1px solid transparent;
  color: var(--cros-text-color-prominent);
}

/* Display a border during check-select mode if we're in a dialog. (This
   can only happen in an open-multi-file dialog). */
body[type='open-multi-file'].check-select .dialog-header {
  border-top: 1px solid var(--cros-bg-color);
}

.dialog-header > .spacer {
  flex: auto;
}

.dialog-header cr-button {
  --active-bg: var(--cros-ripple-color);
  --hover-bg-color: var(--cros-ripple-color);
  --ink-color: var(--cros-ripple-color);
  --ripple-opacity: 100%;
  --text-color: currentColor;
  border: 2px solid transparent;
  border-radius: 18px;
  box-sizing: border-box;
  color: var(--cros-text-color-primary);
  cursor: pointer;
  height: 36px;
  margin: 0 6px;
  min-width: 36px;
  padding: 0;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

html.pointer-active .dialog-header cr-button:not(:active):hover {
  background-color: unset;
  cursor: default;
}

.dialog-header cr-button::after {
  content: '';
  height: 48px;
  position: absolute;
  width: 48px;
}

.dialog-header cr-button[menu-shown] {
  background: var(--cros-icon-button-pressed-color);
}

.dialog-header button:not([menu-shown]):not(:active):hover,
.dialog-header cr-button:not([menu-shown]):not(:active):hover {
  background-color: var(--cros-ripple-color);
}

html.pointer-active .dialog-header cr-button:not([menu-shown]):not(:active):hover {
  background-color: unset;
  cursor: default;
}

.dialog-header cr-button:active:not([menu-shown]) {
  background: var(--cros-icon-button-pressed-color);
}

html.focus-outline-visible .dialog-header cr-button:not(:active):focus {
  border: 2px solid var(--cros-focus-ring-color);
}

body.check-select button,
body.check-select button:hover {
  color: var(--cros-text-color-primary);
}

body.check-select .dialog-header button paper-ripple {
  color: var(--cros-text-color-primary);
}

/** Avoid highlighting if element doesn't have focus by tab (tabindex=-1)
 *  or if focusing during mouse click event ":active" pseudo-selector. */
html.focus-outline-visible .dialog-header
    .menu-button:focus:not([tabindex='-1']):not(:active) {
  background-color: transparent;
}

body.check-select .dialog-header
    .menu-button:focus:not([tabindex='-1']):not(:active) {
  background-color: var(--cros-ripple-color);
}

.dialog-header iron-icon,
.dialog-header .icon {
  height: 16px;
  width: 16px;
}

.dialog-header cr-button {
  line-height: 32px;
  padding: 0 8px;
}

.dialog-header button.icon-button {
  -webkit-app-region: no-drag;
  background-color: transparent;
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
  outline: none;
  position: relative;
}

.dialog-header cr-button.icon-button > .icon {
  background-position: center;
  background-repeat: no-repeat;
  height: 48px;
  left: 0;
  margin-inline-end: -8px;
  margin-inline-start: -8px;
  margin-top: -8px;
  position: absolute;
  top: 0;
  width: 48px;
}

.dialog-header cr-button.icon-button > xf-icon {
  position: absolute;
}

.dialog-header #tasks {
  border-radius: 4px;
  height: 32px;
  padding: 0 12px;
}

.dialog-header cr-button > .icon,
.dialog-header #search-box .clear,
.dialog-header #read-only-icon {
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor;
  background-image: none;
}

.dialog-header #cloud-wrapper {
  display: flex;
  position: relative;
}

.dialog-header #search-wrapper {
  display: flex;
}

.dialog-header.files-ng #search-wrapper {
  align-items: center;
  border-radius: 4px;
  height: 40px;
  transition: background-color 200ms ease;
}

.dialog-header.files-ng #search-wrapper.has-cursor,
.dialog-header.files-ng #search-wrapper.has-text,
.dialog-header.files-ng #search-wrapper.hide-pending {
  background-color: var(--cros-textfield-background-color);
  margin-inline-end: 16px;
}

.dialog-header #search-box cr-input {
  --cr-input-background-color: transparent;
  --cr-input-border-radius: 0;
  --cr-input-error-display: none;
  --cr-input-padding-end: 20px;
  --cr-input-padding-start: 0;
  display: inline-block;
  transition: width 200ms ease;
  vertical-align: middle;
  width: 0;
}

.dialog-header.files-ng #search-button > .icon {
  -webkit-mask-image: url(../images/files/ui/search.svg);
}

.dialog-header.files-ng #sharesheet-button > .icon {
  -webkit-mask-image: url(../images/files/ui/share_ng.svg);
}

.dialog-header.files-ng #delete-button > .icon {
  -webkit-mask-image: url(../images/files/ui/delete_ng.svg);
}

body.check-select .dialog-header #delete-button > .icon {
  background-image: url(../images/files/ui/delete.svg);
}

.dialog-header #move-to-trash-button > .icon {
  -webkit-mask-image: url(../images/files/ui/delete_ng.svg);
}

.dialog-header #restore-from-trash-button > .icon {
  -webkit-mask-image: url(../images/files/ui/restore.svg);
}

.dialog-header.files-ng #refresh-button > .icon {
  -webkit-mask-image: url(../images/files/ui/refresh.svg);
}

.dialog-header.files-ng #view-button > .icon {
  -webkit-mask-image: url(../images/files/ui/view_list.svg);
}

body.check-select #view-button {
  display: none;
}

.dialog-header.files-ng #view-button.thumbnail > .icon {
  -webkit-mask-image: url(../images/files/ui/view_thumbnail.svg);
}

body.check-select #view-button.thumbnail {
  display: none;
}

.dialog-header.files-ng #sort-button > .icon {
  -webkit-mask-image: url(../images/files/ui/sorting_ng.svg);
}

body.check-select #sort-button {
  display: none;
}

.dialog-header.files-ng #gear-button > .icon {
  -webkit-mask-image: url(../images/files/ui/menu_ng.svg);
}
body.check-select #gear-button {
  display: none;
}

.dialog-header.files-ng #selection-menu-button > .icon {
  -webkit-mask-image: url(../images/files/ui/menu_ng.svg);
}

body:not(.check-select) #selection-menu-button {
  display: none;
}

#files-selected-label {
  display: none;
  font-weight: 500;
}

body.files-ng #files-selected-label {
  margin-inline-start: 8px;
}

body.check-select #files-selected-label {
  display: block;
}

#cancel-selection-button {
  --ink-color: var(--cros-ripple-color);
  border: none;
  box-shadow: none;
  color: currentColor;
  display: flex;
  text-transform: none;
}

/* TODO(adanilo) document the calc() reason. */
body.files-ng #cancel-selection-button {
  border: 2px solid transparent;
  margin-inline-start: calc(10px + 1px);
  width: 36px;
}

html.focus-outline-visible body.files-ng #cancel-selection-button:focus:not([tabindex='-1']):not(:active) {
  border: 2px solid var(--cros-icon-color-prominent);
}

body.files-ng #cancel-selection-button > span#cancel-selection-label {
  display: none;
}

body.files-ng #cancel-selection-button .icon-arrow-back {
  -webkit-mask-image: url(../images/files/ui/list_check.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--cros-icon-color-prominent);
  flex: none;
  height: 20px;
  width: 20px;
}

#cancel-selection-button-wrapper {
  display: none;
}

#cancel-selection-button > iron-icon {
  margin-inline-end: 6px;
}

#cancel-selection-label {
  flex: auto;
  line-height: 31px;
  overflow: hidden;
  padding-top: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.check-select #cancel-selection-button-wrapper {
  display: block;
}

/* Search button */
body.check-select-v1 #search-button {
  visibility: hidden;
}

/* Search box */
#search-box {
  display: flex;
  flex: none;
  font-size: 14px;
}

.dialog-header.files-ng #search-box cr-input {
  --cr-input-border-bottom: transparent;
  --cr-input-color: var(--cros-text-color-primary);
  --cr-input-focus-color: transparent;
  --cr-input-placeholder-color: var(--cros-text-color-secondary);
}

.dialog-header.files-ng #search-box cr-input::part(input) {
  caret-color: var(--cr-input-color);
}

.dialog-header.files-ng #search-box.has-cursor,
.dialog-header.files-ng #search-box.has-text,
.dialog-header.files-ng #search-box.hide-pending {
  margin-inline-end: 6px;
}

.dialog-header.files-ng #search-box.has-cursor cr-input,
.dialog-header.files-ng #search-box.has-text cr-input,
.dialog-header.files-ng #search-box.hide-pending cr-input {
  --cr-input-width: calc(288px - 74px);
  width: calc(288px - 54px);
}

#search-box .clear {
  cursor: pointer;
  display: none;
  margin: 0;
  min-width: 0;
  position: absolute;
  right: 0;
  visibility: hidden;
}

.dialog-header.files-ng #search-box .clear {
  background: none;
  height: 36px;
  width: 36px;
}

html:not(.pointer-active) .dialog-header.files-ng #search-box .clear:hover {
  background-color: var(--cros-ripple-color);
}

.dialog-header.files-ng #search-box .clear > .icon {
  -webkit-mask-image: url(../images/files/ui/search_clear_filled.svg);
}

html[dir='rtl'] #search-box .clear {
  left: 0;
  right: auto;
}

.dialog-header.files-ng #search-box.has-cursor .clear,
.dialog-header.files-ng #search-box.has-text .clear {
  display: flex;
}

#search-box.has-text .clear {
  visibility: visible;
}

/* Pinned file toggle */
.dialog-header.files-ng #pinned-toggle-wrapper {
  display: flex;
  flex: none;
}

.dialog-header.files-ng #pinned-toggle-label {
  color: var(--cros-text-color-primary);
  margin-inline-end: 16px;
  margin-inline-start: 12px;
}

.dialog-header.files-ng cr-toggle {
  --cr-toggle-checked-bar-color: var(--cros-switch-track-color-active);
  /* bar color above already defines the opacity, so use 100% here */
  --cr-toggle-checked-bar-opacity: 100%;
  --cr-toggle-checked-button-color: var(--cros-switch-knob-color-active);
  --cr-toggle-checked-ripple-color: var(--cros-focus-aura-color);
  --cr-toggle-unchecked-bar-color: var(--cros-switch-track-color-inactive);
  --cr-toggle-unchecked-button-color: var(--cros-switch-knob-color-inactive);
  --cr-toggle-unchecked-ripple-color: var(--cros-ripple-color);
  --cr-toggle-box-shadow: var(--cros-elevation-1-shadow);
  --cr-toggle-ripple-diameter: 32px;
}

/* only show the ripple ring for tab navigation */
html.focus-outline-visible .dialog-header.files-ng cr-toggle:focus {
  --cr-toggle-ripple-ring: 2px solid var(--cros-focus-ring-color);
}

/* Container for the detail and thumbnail list views. */
.dialog-body {
  flex: auto;
  position: relative;
  transition: all 180ms ease;
}

.main-panel {
  bottom: 0;
  display: flex;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.dialog-middlebar-contents {
  display: flex;
  flex: none;
  max-width: 50%;
  min-width: 45px;
  position: relative;
  width: 180px;
}

/* Container for the ok/cancel buttons. */
.dialog-footer {
  align-items: center;
  background-color: var(--cros-bg-color);
  border-top: 1px solid var(--cros-separator-color);
  display: flex;
  flex: none;
  flex-direction: row;
  outline: none;
  padding: 16px 24px;
}

.dialog-footer #filename-input-box {
  margin-inline-end: 16px;
  margin-inline-start: 16px;
  max-width: 320px;
  min-width: 123px;
}

.dialog-footer cr-input {
  --cr-input-background-color: var(--cros-textfield-background-color);
  --cr-input-border-radius: 0;
  --cr-input-color: var(--cros-textfield-input-color);
  --cr-input-error-color: var(--cros-textfield-label-color-error);
  --cr-input-error-display: none;
  --cr-input-focus-color: var(--cros-textfield-label-color-focus);
  --cr-input-min-height: 32px;
  width: 100%;
}

.dialog-footer .buttonbar {
  display: flex;
  height: 32px;
}

/* Copy style from paper-button for buttons on the footer. */
.dialog-footer button {
  border: 0;
  border-image: none;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0;
  outline: none;
  padding: 1px 16px;
  position: relative;
  text-align: center;
  user-select: none;
  z-index: 0;
}

/* This is only for refresh23 style. */
button > .hover-layer {
  display: none;
}

.dialog-footer button[disabled] {
  cursor: auto;
  pointer-events: none;
}

.dialog-footer button {
  font-weight: 500;
}

.dialog-footer button:hover {
  border-image: none;  /* Overrides the definition of common.css. */
}

.dialog-footer cr-button,
.dialog-footer button {
  height: 32px;
  margin: 0 4px;
  min-width: 92px;
}

.dialog-footer cr-button[disabled],
.dialog-footer cr-button[disabled]:hover,
.dialog-footer button[disabled],
.dialog-footer button[disabled]:hover {
  background-color:
      var(--cros-button-background-color-primary-disabled);
  color: var(--cros-button-label-color-primary-disabled);
}

.dialog-footer .primary {
  background-color: var(--cros-button-background-color-primary);
  color: var(--cros-button-label-color-primary);
}

.dialog-footer .primary:hover {
   background: var(--cros-button-background-color-primary-hover-preblended);
}

.dialog-footer .primary paper-ripple {
  --paper-ripple-opacity: var(--cros-button-primary-ripple-opacity);
  color: var(--cros-button-ripple-color-primary);
}

.dialog-footer .primary:active {
  box-shadow: 0 1px 2px var(--cros-button-active-shadow-color-key-primary),
              0 1px 3px var(--cros-button-active-shadow-color-ambient-primary);
}

.dialog-footer .secondary {
  background: transparent;
  border: 1px solid var(--cros-button-stroke-color-secondary);
  color: var(--cros-button-label-color-secondary);
  margin-inline-end: 8px;
}

.dialog-footer .secondary:hover {
  background: var(--cros-button-background-color-secondary-hover);
  border: 1px solid var(--cros-button-stroke-color-secondary-hover);
}

.dialog-footer .secondary paper-ripple {
  --paper-ripple-opacity: var(--cros-button-secondary-ripple-opacity);
  color: var(--cros-button-ripple-color-secondary);
}

.dialog-footer .secondary:active {
  box-shadow: 0 1px 2px var(--cros-button-active-shadow-color-key-secondary),
              0 1px 3px var(--cros-button-active-shadow-color-ambient-secondary);
}

.dialog-footer .select {
  background-color: var(--cros-textfield-background-color);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  margin-inline-start: 16px;
  max-width: 152px;
  min-height: 32px;
  min-width: 104px;
  outline: none;
  padding: 0 36px 0 16px;
  position: relative;
}

.dialog-footer .select::after {
  -webkit-mask-image: url(../images/files/ui/sort_desc.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--cros-icon-color-primary);
  content: '';
  height: 32px;
  position: absolute;
  right: 0;
  width: 32px;
}

.dialog-footer div.select:not(:active):focus {
  box-shadow: 0 0 0 2px var(--cros-focus-ring-color);
}

.dialog-footer div.select > span {
  color: var(--cros-text-color-primary);
  display: inline-block;
  line-height: 32px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.dialog-footer div.select > div.options {
  background-color: var(--cros-bg-color-elevation-2);
  border-radius: 4px;
  bottom: calc(100% + 2px);
  box-shadow: var(--cros-elevation-2-shadow);
  left: 0;
  min-width: max-content;
  padding: 8px 0;
  position: absolute;
  right: 0;
  z-index: 550;
}

.dialog-footer div.select > div.options:not([expanded]) {
  display: none;
}

.dialog-footer div.select > div.options option {
  color: var(--cros-menu-label-color);
  line-height: 32px;
  min-height: 32px;
  padding: 0 12px 0 16px;
  vertical-align: middle;
}

.dialog-footer div.select > div.options option:hover,
.dialog-footer div.select > div.options:not(:hover) option.selected {
  background-color: var(--cros-menu-item-background-hover);
}

.dialog-footer select:hover {
  border-image: none;
}

html.focus-outline-visible .dialog-footer .primary:focus,
html.focus-outline-visible .dialog-footer .secondary:focus,
html.focus-outline-visible .dialog-footer select:focus {
  outline: 2px solid var(--cros-focus-ring-color);
  outline-offset: 2px;
}

.progressable:not([progress]) .progress-bar,
.progressable:not([progress]) .preparing-label {
  display: none;
}

.progressable[progress] .ok,
.progressable[progress] #filename-input-box,
.progressable[progress] .file-type {
  display: none;
}

.progressable .preparing-label {
  margin-inline-start: 20px;
}

.progressable .progress-bar {
  flex: auto;
  margin-inline-end: 20px;
  margin-inline-start: 20px;
}

/* The container for breadcrumb elements. */
.breadcrumbs {
  align-items: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

body.check-select .breadcrumbs {
  display: none;
}

/* The toolbar indicator that means the current directory is read only. */
#read-only-indicator {
  align-items: center;
  background-color: var(--cros-highlight-color-hover);
  border-radius: 16px;
  display: flex;
  flex: none;
  height: 32px;
  margin-inline-start: 12px;
  padding: 0 16px;
  padding-inline: 16px 12px;
}

body.check-select #read-only-indicator {
  display: none;
}

.dialog-header.files-ng #read-only-icon {
  -webkit-mask-image: url(../images/files/ui/visibility_ng.svg);
  background-color: var(--cros-icon-color-secondary);
  height: 20px;
  margin-inline-end: 8px;
  width: 20px;
}

#read-only-label {
  flex: none;
  font-size: 13px;
  font-weight: 500;
}

.filelist-panel {
  display: flex;
  flex: auto;
  flex-direction: column;
  min-width: 0;
}

#list-container {
  display: flex;
  flex: auto;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

#empty-folder {
  display: flex;
  flex-direction: column;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#empty-folder > .image {
  --empty-folder-svg-dot-color: var(--cros-illustration-color-1-shade-1);
  --empty-folder-svg-file-color: var(--cros-illustration-secondary-color);
  --empty-folder-svg-ellipse-color: var(--cros-illustration-color-1);
  --empty-folder-svg-folder-color: var(--cros-illustration-color-1-shade-2);
  margin-top: 64px;
  text-align: center;
}

.list-view #empty-folder > .image {
  /* The list view has a .table-header at the top, the margin-top should also
  cover that, hence the desired margin plus the .table-header height. */
  margin-top: calc(64px + 57px);
}

#empty-folder > .label {
  color: var(--cros-text-color-secondary);
  font: var(--cros-body-2-font);
  margin-top: 16px;
  text-align: center;
}

#empty-folder > .label > span#empty-folder-title {
  font-weight: bold;
}

#detail-table {
  display: flex;
  flex: auto;
  flex-direction: column;
  min-height: 0;
  outline: none;
}

#detail-table > list,
.thumbnail-grid {
  flex: auto;
}

#file-list .drag-selection-border {
  -webkit-box-sizing: border-box;
  background-color: rgba(var(--cros-bg-color-rgb), 30%);
  border: 2px solid rgba(var(--cros-bg-color-rgb), 60%);
  outline: 1px solid var(--cros-selection-outline);
  position: absolute;
  z-index: 2;
}

.spinner {
  background: url(chrome://resources/images/throbber_small.svg) center/100%
      no-repeat;
  height: 16px;
  left: 50%;
  margin-inline-start: -8px;
  margin-top: -8px;
  opacity: 0.5;
  position: absolute;
  top: 50%;
  width: 16px;
}

.loading-indicator {
  left: calc(50% - 24px);
  position: absolute;
  right: calc(50% - 24px);
  top: 64px;
}

.list-view .loading-indicator {
  /* The list view has a .table-header at the top, the top should also
  cover that, hence the desired top plus the .table-header height. */
  top: calc(64px + 57px);
}

@keyframes heightAnimation {
  0% {
    display: flex;
    height: 0;
  }
}

body.files-ng .button-group {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row-reverse;
  margin-inline-start: auto;
  padding-inline-start: 48px;
}

body.files-ng .button-group > a {
  text-decoration-line: none;
}

body.files-ng .banner-close {
  border: 0;
  height: 32px;
  margin-inline-end: 20px;
  padding-inline-end: 16px;
  padding-inline-start: 16px;
  position: relative;
}

/* The cr.ui.Grid representing the detailed file list. */
.thumbnail-grid {
  /* On the right side, we have less margin to pack items as long as they are
     fully visible. */
  box-sizing: border-box;
  overflow-y: auto;
  width: 100%;
}

body.files-ng grid .grid-title {
  box-sizing: border-box;
  color: var(--cros-text-color-secondary);
  font-family: 'Roboto Medium';
  padding-inline-start: 16px;
  padding-top: 20px;
  /* Make sure clicking this area can unselect file grids. */
  pointer-events: none;
  width: 100%;
}

grid .grid-title.group-by-isDirectory {
  /* Folders/Files heading doesn't have border bottom, so having a padding
   * bottom together with grid item's margin-top will make the gap too big.
   * To prevent that, we can treat grid item (.thumbnail-item)'s margin-top
   * (16px) as heading's padding bottom, that's why we use the desired height
   * to minus the margin-top value here.
   */
  height: calc(56px - 16px);
}

grid .grid-title.group-by-modificationTime {
  border-bottom: 1px solid var(--cros-separator-color);
  /* The desired height plus the border width. */
  height: calc(56px + 1px);
  padding-bottom: 16px;
}

body.files-ng .thumbnail-frame > .img-container {
  position: relative;
}

#list-container.thumbnail-view .inline-status,
#list-container.thumbnail-view .inline-status .progress,
#list-container.thumbnail-view .inline-status xf-icon {
  display: none;
  height: 16px;
  width: 16px;
}

#list-container.thumbnail-view .inline-status {
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 4px;
  top: 4px;
}

#list-container.thumbnail-view li.directory .inline-status {
  height: 100%;
  top: 0;
}

#list-container.thumbnail-view li.pinned:not([renaming]):not(.dim-offline) .inline-status,
#list-container.thumbnail-view li.pinned:not([renaming]):not(.dim-offline)[data-sync-status=not_found] .inline-status xf-icon,
#list-container.thumbnail-view li:not([renaming])[data-sync-status]:not([data-sync-status=not_found]) .inline-status,
#list-container.thumbnail-view li:not([renaming])[data-sync-status]:not([data-sync-status=not_found]) .inline-status .progress {
  display: flex;
}

#list-container.thumbnail-view li.pinned .inline-status xf-icon[type=offline] {
  --xf-icon-color: var(--cros-icon-color-secondary);
}

/* Only display outlines for entries with thumbnails. */
#list-container.thumbnail-view li:has(.thumbnail) .inline-status .progress,
#list-container.thumbnail-view li.pinned:has(.thumbnail) .inline-status xf-icon[type=offline] {
  --xf-icon-color-outline: var(--cros-bg-color);
}

html:not(.pointer-active) body[type='full-page'] .thumbnail-frame > .img-container,
body[type='full-page'] .thumbnail-frame > .img-container:active,
html:not(.pointer-active) body[type='full-page'] .detail-name .detail-icon,
body[type='full-page'] .detail-name .detail-icon:active {
  cursor: pointer;
}

.thumbnail-bottom {
  align-items: center;
  bottom: 0;
  cursor: auto;
  display: flex;
  flex-direction: row;
  left: 0;
  padding: 0 6px;
  position: absolute;
  right: 0;
}

body.files-ng .thumbnail-bottom {
  padding: 0;
}

.thumbnail-bottom .detail-icon {
  flex: none;
  height: 16px;
  width: 16px;
}

.thumbnail-bottom .filename-label {
  flex: auto;
  font-weight: 500;
  padding-inline-end: 6px;
}

body.files-ng .thumbnail-item .filename-label {
  font-weight: normal;
  padding-inline-end: 12px;
}

body.files-ng .thumbnail-item.directory.pinned .filename-label {
  padding-inline-end: 24px;
}

/* Styles specific for the grid view. */

body.files-ng .thumbnail-grid .thumbnail-item {
  background-color: inherit;
  border-radius: 4px;
  height: 160px;
  margin-inline-start: 16px;
  margin-top: 16px;
  overflow: hidden;
  position: relative;
  vertical-align: top;  /* Prevent vertical spacing for wrapped inline box. */
  width: 180px;
}

body.files-ng .thumbnail-item.directory   {
  box-shadow: none;
  height: 40px;
}

body.files-ng #list-container .thumbnail-grid li {
  border: 1px solid var(--cros-separator-color);
}

body.files-ng grid .thumbnail-bottom .detail-icon {
  color: var(--cros-icon-color-secondary);
  height: 40px;
  padding-inline-end: 6px;
  padding-inline-start: 6px;
  width: 32px;
}

html:not(.pointer-active) body.files-ng grid .thumbnail-bottom .detail-icon,
body.files-ng grid .thumbnail-bottom .detail-icon:active {
  cursor: pointer;
}

.thumbnail-grid .thumbnail-frame {
  height: 100%;
  width: 100%;
}

.thumbnail-grid .img-container {
  background-color: var(--cros-highlight-color-hover);
  height: 100%;
  width: 100%;
}

body.files-ng .thumbnail-grid .img-container {
  color: var(--cros-text-color-secondary);
  height: 120px;
}

.thumbnail-grid .img-container > .thumbnail {
  -webkit-user-drag: none;
  background-color: var(--cros-highlight-color-hover);
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  opacity: 1;
  position: absolute;
  width: 100%;
}

body.files-ng .thumbnail-grid .thumbnail-bottom {
  color: var(--cros-text-color-primary);
  height: 40px;
}

body.files-ng .thumbnail-grid .thumbnail-item[selected] .thumbnail-bottom,
body.files-ng .thumbnail-grid .thumbnail-item[lead] .thumbnail-bottom,
body.files-ng .thumbnail-grid .thumbnail-item[selected].directory
    .thumbnail-bottom,
body.files-ng .thumbnail-grid .thumbnail-item[lead].directory
    .thumbnail-bottom,
.thumbnail-grid .thumbnail-item[selected] .thumbnail-bottom .icon-badge,
.thumbnail-grid .thumbnail-item[lead] .thumbnail-bottom .icon-badge {
  background-color: var(--cros-highlight-color-hover);
}

body.files-ng .thumbnail-grid:focus .thumbnail-item[selected] .thumbnail-bottom,
body.files-ng .thumbnail-grid:focus .thumbnail-item[lead] .thumbnail-bottom,
body.files-ng .thumbnail-grid:focus .thumbnail-item[selected].directory
    .thumbnail-bottom,
body.files-ng .thumbnail-grid:focus .thumbnail-item[lead].directory
    .thumbnail-bottom,
.thumbnail-grid:focus .thumbnail-item[selected] .thumbnail-bottom .icon-badge,
.thumbnail-grid:focus .thumbnail-item[lead] .thumbnail-bottom .icon-badge {
  background-color: var(--cros-highlight-color);
}

body.check-select.files-ng .thumbnail-grid:focus .thumbnail-item[selected]
    .thumbnail-bottom,
body.check-select.files-ng .thumbnail-grid:focus .thumbnail-item[lead]
    .thumbnail-bottom,
body.check-select.files-ng .thumbnail-grid:focus
    .thumbnail-item[selected].directory .thumbnail-bottom,
body.check-select.files-ng .thumbnail-grid:focus .thumbnail-item[lead].directory
    .thumbnail-bottom {
  color: var(--cros-text-color-selection);
}

body.check-select.files-ng #list-container .thumbnail-grid:focus
    .thumbnail-item[lead],
body.files-ng #list-container .thumbnail-grid:focus
    .thumbnail-item[lead]:not([selected]) {
  /* 2px border: 1px via box-shadow + 1px via border, to accommodate
     the difference between regular border 1px and selected border 2px.*/
  border-color: var(--cros-focus-ring-color);
  box-shadow: 0 0 0 1px var(--cros-focus-ring-color);
}

body.check-select.files-ng #list-container .thumbnail-grid
    .thumbnail-item[lead],
body.files-ng #list-container .thumbnail-grid
    .thumbnail-item[lead]:not([selected]) {
  /* 2px border: 1px via box-shadow + 1px via border, to accommodate
     the difference between regular border 1px and selected border 2px.*/
  border-color: var(--cros-focus-ring-color-inactive);
  box-shadow: 0 0 0 1px var(--cros-focus-ring-color-inactive);
}

.thumbnail-grid > .spacer.folder-spacer {
  height: 5px;
}

body.files-ng .thumbnail-grid > .spacer {
  height: 0;
}

body:not(.check-select) .thumbnail-grid.image-dominant
    .can-hide-filename.thumbnail-loaded:not([selected]) .thumbnail-bottom {
  display: none;
}

.badge {
  background-color: var(--cros-bg-color);
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 2px;
  display: none;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
}

html[dir='rtl'] .badge {
  left: 10px;
  right: auto;
}

/* Padding counterweights negative margins of items, thus eliminating scroll
   bar when it's not needed. Max height is set to fit 8 items before showing
   scroll bar. */
body.files-ng #default-tasks-list {
  border-top: solid 1px var(--cros-separator-color);
  height: 240px;
  margin: 16px -16px;
  margin-bottom: 12px;
  padding-top: 8px;
}

#default-task-dialog.bottom-shadow::after {
  background: linear-gradient(transparent 0, var(--cros-bg-color) 100%);
  bottom: 24px;
  content: '';
  height: 40px;
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 100%
}

@media (prefers-color-scheme: dark) {
  #default-task-dialog.bottom-shadow::after {
    background: linear-gradient(transparent 0,
                                var(--cros-bg-color-elevation-2) 100%);
  }
}

#default-tasks-list li {
  height: 40px;
  line-height: 40px;
}

#default-tasks-list > li > .icon {
  -webkit-mask-position: 16px center;
  -webkit-mask-repeat: no-repeat;
  background-position: 16px center;
  background-repeat: no-repeat;
  background-size: 20px;
  height: 100%;
}

#default-tasks-list > li > .label {
  padding-inline-start: 52px;
  position: absolute;
}

html[dir='rtl'] #default-tasks-list > li > .icon {
  -webkit-mask-position-x: calc(100% - 16px);
  background-position-x: calc(100% - 16px);
}

body.files-ng #list-container list > li[selected],
body.files-ng #list-container list > li:active,
body.files-ng #list-container list > li.accepts,
body.files-ng #list-container list > li[lead],
body.files-ng #list-container list > li[selected] .icon-badge,
body.files-ng #list-container list > li:active .icon-badge,
body.files-ng #list-container list > li.accepts .icon-badge,
body.files-ng #list-container list > li[lead] .icon-badge {
  background-color: var(--cros-highlight-color-hover);
}

body.files-ng #list-container list > li[selected],
body.files-ng #list-container list > li:active,
body.files-ng #list-container list > li.accepts,
body.files-ng #list-container list > li[lead] {
  border-radius: 2px;
}

body.files-ng #list-container list:focus > li[selected],
body.files-ng #list-container list:focus > li.accepts[selected],
body.files-ng #list-container list:focus > li[lead],
body.files-ng #list-container list:focus > li[selected] .icon-badge,
body.files-ng #list-container list:focus > li.accepts[selected] .icon-badge,
body.files-ng #list-container list:focus > li[lead] .icon-badge {
  background-color: var(--cros-highlight-color);
}

body.files-ng #default-tasks-list:focus > li[selected],
body.files-ng #default-tasks-list > li[selected] {
  background-color: var(--cros-highlight-color);
  outline: none;
}

body.files-ng #default-tasks-list li[selected]::after {
  -webkit-mask-image: url(../images/common/ic_selected.svg);
  -webkit-mask-position: right;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--cros-icon-color-selection);
  content: ' ';
  height: 40px;
  position: absolute;
  right: 16px;
  top: 0;
  width: 40px;
}

html[dir='rtl'] body.files-ng #default-tasks-list li[selected]::after {
  background-position: left;
  left: 16px;
  right: unset;
}

/* selector "li[lead]:not([selected])" is for the row just gets unselected */
body.check-select #list-container list > li[lead]:not([selected]),
#list-container list > li[lead]:not([selected]) {
  background-color: var(--cros-highlight-color-hover);
}

body.check-select #list-container list:focus > li[lead]:not([selected]),
#list-container list > li[lead]:not([selected]):focus {
  background-color: var(--cros-highlight-color);
}

body.files-ng #list-container li {
  border: 1px solid transparent;
}

/* Modify GROUP_HEADING_HEIGHT in file_table_list.js if this height changes. */
#list-container .group-heading {
  border-bottom: 1px solid var(--cros-separator-color);
  box-sizing: border-box;
  color: var(--cros-text-color-secondary);
  font-family: 'Roboto Medium';
  /* The desired height plus the border width. */
  height: calc(56px + 1px);
  padding-inline-start: 16px;
  padding-top: 20px;
  /* Make sure clicking this area can unselect file items. */
  pointer-events: none;
  width: 100%;
}

/*
 * selector "li[lead]" is for the row just being operated on,
 * e.g. with mouse: click/select/unselect
 *      with keyboard: Ctrl + ArrowUp/ArrowDown to move
 */
body.files-ng.check-select #list-container list:focus > li[lead] {
  border: 1px solid var(--cros-focus-ring-color);
}

body.files-ng.check-select #list-container list > li[lead] {
  border: 1px solid var(--cros-focus-ring-color-inactive);
}

#list-container grid > .accepts {
  background-color: var(--cros-highlight-color-hover)
}

#directory-tree .tree-item.accepts > .tree-row,
#list-container list > li.accepts,
#list-container grid > li.accepts {
  animation: acceptsBlink 200ms linear 1s 3;
}

@keyframes acceptsBlink {
  0% {
    background-color: transparent;
    color: var(--cros-ripple-color);
  }
}

.table-row-cell .filename-label,
.thumbnail-item .filename-label,
/* Show ellipsis in cells. The name column has different structure and overrides
   this rule. */
.table-row-cell > div {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

/* Text box used for renaming in the detail list. */
.table-row-cell input.rename {
  border-width: 0;
  min-width: 0;
  padding: 2px 0;
}

input.rename:focus,
#directory-tree .tree-row .rename-placeholder > input:focus,
#directory-tree .tree-row > .file-row .rename-placeholder > input:focus,
#directory-tree .tree-row > input:focus,
#directory-tree .tree-row > .file-row > input:focus {
  background-color: var(--cros-bg-color);
  border: none;
  border-radius: 2px;
  caret-color: var(--cros-textfield-cursor-color-focus);
  color: var(--cros-text-color-primary);
  outline: 2px solid var(--cros-focus-ring-color);
}

input.rename::selection,
#directory-tree .tree-row .rename-placeholder > input::selection,
#directory-tree .tree-row > .file-row .rename-placeholder > input::selection,
#directory-tree .tree-row > input::selection,
#directory-tree .tree-row > .file-row > input::selection {
  background-color: var(--cros-text-highlight-color);
}

input.rename {
  font: inherit;
  line-height: 1;
  text-align: inherit;
}

.table-row-cell .filename-label {
  flex: initial;
}

.table-row-cell input.rename {
  flex: auto;
}

body.files-ng #list-container input.rename {
  margin-inline-end: 4px;
}

li[renaming=''] .filename-label {
  display: none;
}

/* Text box used for renaming in the thumbnail list. */
.thumbnail-grid input.rename {
  box-sizing: border-box;
  width: 100%;
}

/* The cr.ui.Table representing the detailed file list. */
.detail-table {
  width: 100%;
}

.dialog-footer > .left {
  align-items: center;
  display: flex;
  flex: auto;
  flex-direction: row;
}

.dialog-footer > .right {
  align-items: center;
  flex: none;
  justify-content: flex-end;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Table splitter element */
.table-header-splitter:last-child {
  display: none;
}

/* Container for a table header. */
.table-header {
  border-bottom: 1px solid var(--cros-separator-color);
  box-sizing: border-box;
  color: var(--cros-text-color-secondary);
  flex: none;
  font-family: 'Roboto Medium';
  /* The desired height plus the border bottom. */
  height: calc(56px + 1px);
  line-height: 20px;
}

/* Text label in a table header. */
.table-header-label {
  color: inherit;
  font-weight: normal;
  line-height: 20px;
  margin: 0 10px;
  margin-inline-end: 0;
  margin-inline-start: 32px;
}

.table-row-cell > * {
  align-items: center;
  flex: auto;
  flex-direction: row;
  padding: 0 10px;
}

.table-row-cell {
  color: var(--cros-text-color-secondary);
}

.table-row-cell > .detail-name {
  display: flex;
}

.table-row-cell > .detail-name {
  color: var(--cros-text-color-primary);
}

.table-row-cell {
  align-items: center;
}

#list-container li.table-row {
  height: 40px;
  line-height: 40px;
}

/* The icon in the name column. See file_types.css for specific icons. */
.detail-icon {
  height: 24px;
  width: 24px;
}

.status-icon {
  height: 24px;
  margin-inline-end: 10px;
  width: 24px;
}

/* The managed icon in the details list for DLP restricted files. */
.dlp-managed-icon {
  -webkit-mask-image: url(chrome://resources/images/business.svg);
  -webkit-mask-position: right center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 16px 16px;
  background-color: currentColor;
  color: var(--cros-icon-color-primary);
  height: 24px;
  margin-inline-end: 10px;
  margin-inline-start: auto;
  width: 24px;
}

body.files-ng #list-container list li .detail-icon {
  color: var(--cros-icon-color-primary);
  height: 40px;
  margin-inline-end: 8px;
  margin-inline-start: 8px;
  width: 40px;
}

#list-container li .detail-checkmark {
  background-position: center;
  background-repeat: no-repeat;
  color: var(--cros-icon-color-selection);
  height: 28px;
  isolation: isolate;
  opacity: 0;
  position: absolute;
  transition: opacity 220ms ease;
  width: 28px;
}

body.check-select #list-container li[selected] .detail-checkmark {
  opacity: 1;
}

#list-container list li .detail-thumbnail {
  height: 28px;
  overflow: hidden;
  width: 28px;
}

#list-container list li .detail-thumbnail > .thumbnail {
  -webkit-user-drag: none;
  background-color: var(--cros-highlight-color-hover);
  background-position: center;
  background-size: cover;
  border-radius: 14px;
  height: 100%;
  isolation: isolate;
  opacity: 1;
  width: 100%;
}

body.check-select #list-container list li[selected] .detail-thumbnail
> .thumbnail {
  /* Fade out after checkmark fades in. */
  animation: fadeOut 0ms 220ms ease backwards;
  opacity: 0;
}

#tasks-menu cr-menu-item.change-default .icon.start {
  display: none;
}

#action-bar {
  display: flex;
  flex: none;
}

.dialog-header.files-ng #action-bar {
  align-items: center;
  height: 48px;
}

.detail-name > * {
  align-items: center;
  display: flex;
  flex: none;
}

#filename-input-box {
  align-items: center;
  display: flex;
  flex: auto;
  margin-inline-end: 30px;
  margin-inline-start: 30px;
}

body:not([type='saveas-file']) #filename-input-box {
  display: none;
}

/* Dimmed items */

body[type='folder'] .file,
body[type='upload-folder'] .file,
.dialog-container[connection='OFFLINE'] .dim-offline,
body[block-hosted-docs] .file.dim-hosted,
body[block-encrypted] .file.dim-encrypted,
.thumbnail-grid [disabled],
#detail-table [disabled],
#directory-tree .tree-item[disabled] > .tree-row {
  opacity: var(--cros-disabled-opacity);
}

/* Invisible container for elements representing files while dragging. */
body.files-ng #drag-container {
  background-color: transparent;
  height: calc(12px + 40px + 8px + 8px);
  left: 0;
  position: fixed;
  top: 0;
  width: calc(8px + 192px + 8px + 8px);
  z-index: -1;  /* below .dialog-container */
}

body.files-ng #drag-container .drag-box {
  background-color: var(--cros-bg-color-elevation-2);
  border-radius: 2px;
  box-shadow: var(--cros-elevation-2-shadow);
  box-sizing: border-box;
  height: 40px;
  position: absolute;
  width: 192px;
}

body.files-ng #drag-container .drag-contents {
  align-items: center;
  display: flex;
  left: 8px;
  padding-inline-end: 2px;
  padding-inline-start: 8px;
  right: 8px;
  top: 12px;
}

body.files-ng #drag-container .drag-multiple {
  left: calc(8px + 8px);
  right: calc(8px + 8px);
  top: calc(12px + 8px);
}

body.files-ng #drag-container .detail-icon {
  border-radius: 50%;
  flex: none;
}

body.files-ng #drag-container .detail-icon[file-type-icon] {
  color: var(--cros-icon-color-primary);
}

body.files-ng #drag-container .label {
  color: var(--cros-text-color-primary);
  overflow: hidden;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.files-ng #drag-container .drag-bubble {
  background-color: var(--cros-icon-color-prominent);
  border-radius: 12px;
  color: var(--cros-bg-color);
  font-size: 14px;
  font-weight: 700;
  height: 24px;
  line-height: 24px;
  max-width: fit-content;
  padding: 0 8px;
  position: absolute;
  right: calc(8px * 0.5);
  white-space: nowrap;
}

html[dir=rtl] body.files-ng #drag-container .drag-bubble {
  left: calc(8px * 0.5);
  right: unset;
}

/* TODO(fukino): Gather menu-related definitions into one place. */
cr-menu#file-context-menu {
  min-width: 208px;
  z-index: 600;  /* Must be below the overlay pane (1000). */
}

cr-menu#file-context-menu > :not(hr) {
  padding-inline-end: 8px;
}

cr-menu#file-context-menu.toolbar-menu > .hide-on-toolbar {
  display: none;
}

cr-menu.chrome-menu hr {
  color: transparent;
  font-size: 0;
}

body[drive='unmounted'] .dialog-container #list-container,
body[drive='mounting'] .dialog-container #list-container,
body[drive='error'] .dialog-container #list-container,
body[unformatted] .dialog-container #list-container {
  opacity: 0;
}

.buttonbar > * {
  position: relative;
}

#list-container .table-header-inner {
  height: 100%;
}

#list-container .table-header-cell:hover {
  background-color: inherit;
}

#list-container .table-header-cell:first-child {
  -webkit-box-sizing: border-box;
  padding-inline-start: 8px;
}

body.files-ng #list-container .table-header-cell:first-child {
  padding-inline-start: 0;
}

body.files-ng .table-header-cell {
  padding-bottom: 12px;
  padding-top: 12px;
}

html:not(.pointer-active) body.files-ng .table-header-cell,
body.files-ng .table-header-cell:active {
  cursor: pointer;
}

body.files-ng #list-container .table-header-cell:first-child
.table-header-label {
  margin-inline-start: 16px;
}

.table-header-label .sort-icon {
  --cr-icon-button-fill-color: var(--cros-icon-color-secondary);
  --cr-icon-button-icon-size: 16px;
  --cr-icon-button-focus-outline-color: var(--cros-focus-ring-color);
  --cr-icon-button-hover-background-color: var(--cros-ripple-color);
  --cr-icon-button-size: 32px;
  border-radius: 50%;
  cursor: default;
}

.table-header-label .sort-icon:active {
  background: var(--cros-icon-button-pressed-color);
}

html:not(.pointer-active) .table-header-label .sort-icon:hover,
.table-header-label .sort-icon:active {
  cursor: pointer;
}

.table-header-label .not-sorted .sort-icon {
  display: none;
}

html.pointer-active .table-header-label .sort-icon:not(:active):hover,
html.col-resize .table-header-label .sort-icon:not(:active):hover {
  --cr-icon-button-hover-background-color: none;
}

body.files-ng .table-label-container {
  align-items: center;
  display: flex;
  height: 32px;
}

/* Text in the column header */
body.files-ng .table-label-container > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/** Size column is aligned to right. */
body.files-ng .table-header-label.size .table-label-container {
  justify-content: flex-end;
}

body.files-ng #list-container li.table-row {
  box-sizing: border-box;
  height: 40px;
  line-height: 20px;
}

body.files-ng.check-select #list-container list li[selected] .detail-thumbnail
> .thumbnail {
  animation: none;
}

body.files-ng #list-container list li .detail-thumbnail > .thumbnail {
  border-radius: 50%;
  height: 24px;
  margin-inline-start: 8px;
  margin-top: 4px;
  width: 24px;
}

body.files-ng .table-row-cell > * {
  color: var(--cros-text-color-secondary);
  padding: 0;
  padding-inline-start: 32px;
  padding-top: 0 !important;
}

body.files-ng .table-header-splitter  {
  background: none;
  height: 32px;
  margin-top: 12px;
  width: auto;
}

.table-header-splitter .splitter-icon {
  /*
   * TODO(crbug.com/1268206): the icon is not in disabled state, a new css
   * variable needs to be created and applied here.
   */
  --cr-icon-button-fill-color: var(--cros-icon-color-disabled);
  --cr-icon-button-hover-background-color: var(--cros-ripple-color);
  --cr-icon-button-icon-size: 32px;
  --cr-icon-button-margin-start: 0px;
  --cr-icon-button-size: 32px;
  cursor: default;
  height: 32px;
}

.table-header-splitter .splitter-icon:active {
  background: var(--cros-icon-button-pressed-color);
}

html:not(.pointer-active) .table-header-splitter .splitter-icon:hover {
  cursor: col-resize;
}

html.pointer-active .table-header-splitter .splitter-icon:not(:active):hover,
html.col-resize .table-header-splitter .splitter-icon:not(:active):hover {
  --cr-icon-button-hover-background-color: none;
}

body.files-ng #list-container .table-row-cell .size {
  padding-inline-end: 5px;
  padding-inline-start: 22px;
}

body.files-ng.check-select list:focus li[selected] .table-row-cell > * {
  color: var(--cros-text-color-selection);
}

body.files-ng .table-row-cell:first-child > * {
  padding-inline-start: 0;
}

body.files-ng .table-row-cell .filename-label {
  color: var(--cros-text-color-primary);
  flex-grow: 1;
  padding-top: 0;
}

body.files-ng.check-select list:focus li[selected] .table-row-cell
.filename-label {
  color: var(--cros-text-color-selection);
}

body.files-ng #list-container li .detail-checkmark {
  -webkit-mask-image: url(../images/files/ui/list_check.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor;
  background-image: none;
  height: 40px;
  width: 40px;
}

body.files-ng grid li .detail-checkmark {
  width: 32px !important;
}

body.files-ng #list-container :focus li .detail-checkmark {
  color: var(--cros-icon-color-selection);
}

body.files-ng #list-container li .detail-checkmark {
  color: var(--cros-icon-color-secondary);
}

body.files-ng #list-container li .detail-thumbnail {
  height: 32px;
  width: 32px;
}

#list-container .list .encryption-status,
#list-container .list .encryption-status xf-icon,
#list-container .list .inline-status,
#list-container .list .inline-status .progress,
#list-container .list .inline-status xf-icon {
  display: none;
  height: 16px;
  width: 16px;
}

#list-container .list .inline-status {
  align-items: center;
  justify-content: center;
}

#list-container .list li.encrypted:not([renaming]) .encryption-status,
#list-container .list li.encrypted:not([renaming]) .encryption-status xf-icon[type=encrypted],
#list-container .list li.pinned:not([renaming]):not(.dim-offline) .inline-status,
#list-container .list li.pinned:not([renaming]):not(.dim-offline)[data-sync-status=not_found] .inline-status xf-icon,
#list-container .list li:not([renaming])[data-sync-status]:not([data-sync-status=not_found]) .inline-status,
#list-container .list li:not([renaming])[data-sync-status]:not([data-sync-status=not_found]) .inline-status .progress {
  display: flex;
}

#list-container .list li.encrypted .encryption-status xf-icon[type=encrypted],
#list-container .list li.pinned .inline-status xf-icon[type=offline] {
  --xf-icon-color: var(--cros-icon-color-secondary);
}

#list-container .list li.encrypted:not([renaming]) .filename-label {
  flex-grow: 0;
}

#list-container .list li.encrypted:not([renaming]) .encryption-status {
  flex-grow: 1;
}

#new-folder-button {
  flex: none;
}

.cr-dialog-container.files-ng #default-task-dialog {
  width: 352px;
}

.install-linux-package-details-frame {
  border: 1px solid var(--cros-separator-color);
  display: block;
  height: 150px;
  overflow: scroll;
  padding: 8px 10px;
  user-select: text;
}

.files-ng .install-linux-package-details-frame {
  margin-top: 16px;
}

.cr-dialog-container.files-ng .install-linux-package-details-label {
  margin-bottom: 10px;
}

.cr-dialog-container.files-ng .install-linux-package-detail-label {
  color: var(--cros-text-color-primary);
  display: inline;
  margin-inline-end: 5px;
}

.cr-dialog-container.files-ng .install-linux-package-detail-value {
  color: var(--cros-text-color-secondary);
  display: inline;
  margin-bottom: 5px;
  white-space: pre-wrap;
}

list.autocomplete-suggestions {
  background-color: var(--cros-bg-color-elevation-2);
  border-radius: 3px;
  box-shadow: var(--cros-elevation-2-shadow);
  box-sizing: border-box;  /* To match the width with the search box's. */
  color: var(--cros-menu-label-color);
  flex: none;
  margin-inline-start: -47px;
  margin-top: 7px;
  overflow: hidden;
  padding: 8px 0;
  position: fixed;
  /* TODO(crbug.com/1289086): Remove the hard-code with, use JS to set it. */
  width: 286px !important; /* This overrides the value specified by script. */
  z-index: 550;
}

list.autocomplete-suggestions > li {
  align-items: center;
  display: flex;
  height: 32px;
}

/* "search drive" row */
list.autocomplete-suggestions > li:first-of-type {
  color: var(--cros-text-color-secondary);
}

list.autocomplete-suggestions > li > div.detail-icon {
  flex: none;
  height: 32px;
  width: 32px;
}

list.autocomplete-suggestions > li > div.detail-text {
  flex: auto;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

list.autocomplete-suggestions > li > div.detail-text em {
  font-style: normal;
}

list.autocomplete-suggestions > li > div[search-icon] {
  -webkit-mask-image: url(../images/files/ui/search.svg);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor;
}

list.autocomplete-suggestions > [selected],
list.autocomplete-suggestions > [lead] {
  background-color: var(--cros-menu-item-background-hover);
}

#gear-menu > cr-menu-item:not(.menuitem-button),
#sort-menu > cr-menu-item {
  margin-inline-end: 50px;
}

.cr-dialog-container.files-ng #suggest-app-dialog.cr-dialog-frame {
  max-width: unset !important;
  min-width: unset !important;
  width: 735px;
}

.error-dialog-frame .error-dialog-img {
  background-image: -webkit-image-set(
    url(chrome://theme/IDR_ERROR_NETWORK_GENERIC) 1x,
    url(chrome://theme/IDR_ERROR_NETWORK_GENERIC@2x) 2x);
  background-position: center;
  background-repeat: no-repeat;
  height: 40px;
}

.error-dialog-frame .cr-dialog-cancel {
  display: none;
}

.error-dialog-frame .cr-dialog-close,
.error-dialog-frame .cr-dialog-title {
  display: none;
}

.error-dialog-frame .cr-dialog-text {
  text-align: center;
}

/* Feedback panels */

.files-feedback-panels {
  align-items: flex-end;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 24px;
  z-index: 502; /* Above splitter, but below quickview. */
}

.signals-overscroll {
  min-height: calc(68px + 24px);
}

#quick-view {
  z-index: 505; /* Must be above the scroll bar (500). */
}

files-toast {
  /* Must be above the splitter (500) but below menu-like UI (550). */
  z-index: 520;
}

/* File type filter buttons in Recents view. */
#file-type-filter-container {
  display: flex;
  font-size: 13px;
  padding: 12px 0 12px 12px;
}

.file-type-filter-button {
  --border-color: var(--cros-button-stroke-color-secondary);
  --cr-button-height: 32px;
  --hover-bg-color: var(--cros-ripple-color);
  --hover-border-color: var(--cros-button-stroke-color-secondary);
  --ink-color: var(--cros-ripple-color);
  --ripple-opacity: 100%;
  --text-color: var(--cros-text-color-secondary);
  border-radius: 20px;
  margin-inline: 4px;
  min-width: auto;
  outline: none;
}

.file-type-filter-button.active {
  /* Intentionally no hover color for active state. */
  --hover-bg-color: none;
  --ink-color: var(--cros-ripple-color-prominent);
  --text-color: var(--cros-text-color-selection);
  background-color: var(--cros-highlight-color);
  border-color: transparent;
}

html.pointer-active .file-type-filter-button:not(:active) {
  --hover-bg-color: none;
  cursor: default;
}

html.focus-outline-visible .file-type-filter-button:focus {
  outline: 2px solid var(--cros-focus-ring-color);
  outline-offset: 2px;
}

/*
 * Preventing FOUC
 */
cr-input:not(:defined),
files-tooltip:not(:defined) {
  display: none;
}

/*
 * Banner styles.
 */
#banners > * {
  align-items: center;
  display: flex !important;
  max-height: 0;
  opacity: 0;
  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 150ms ease 50ms;
  visibility: hidden;
}

#banners > *:not([hidden]) {
  background-color: var(--cros-bg-color-elevation-1);
  border-radius: 8px;
  box-shadow: var(--cros-elevation-1-shadow);
  height: auto;
  margin-bottom: 4px;
  margin-inline-end: 16px;
  margin-inline-start: 0;
  margin-top: 16px;
  max-height: 300px;
  min-height: 46px;
  opacity: 1;
  padding-bottom: 12px;
  padding-inline-end: 8px;
  padding-inline-start: 0;
  padding-top: 12px;
  visibility: visible;
}

.table-row-cell > .dateholder {
  display: flex;
}


.table-row-cell > .dateholder > .date {
  flex: 1 1;
  overflow: hidden;
}

.table-row-cell > .dateholder > .dlp-managed-icon {
  flex: 0 0 24px;
  margin-inline-start: 8px;
}