/* icons */
.deprecated-icon.folder, .deprecated-icon-folder {
  background: transparent url(../icons/mimetypes/folder.png) 0.5em 7px
    no-repeat;
  padding: 0.5em 0.5em 0.5em 30px; /* 30px = 16px icon + 7px padding above + a little more whitespace */
}

.folder-content {
  clear: both;
}

.mimetype-fixed-container {
  background-color: transparent;
  background-position: 0.5em center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  padding: 0.5em 0.5em 0.5em 30px;
  /* default to the unknown icon if there is no specific filetype selector;
     this has the same precedence as the mimtype-icon-* values so this must
     be defined before the per-file icon selectors. */
     background-image: url(../icons/mimetypes/unknown.png);
}

.mimetype-floating-container {
  background-color: transparent;
  background-repeat: no-repeat;
  float: right;
  padding: 8px; /* Makes the container 16x16 in order to show full icon. */
  /* same rationale as for .mimetype-fixed-container */
  background-image: url(../icons/mimetypes/unknown.png);
}
.mimetype-bullet {
  background-color: transparent;
  background-repeat: no-repeat;
  display: inline-block;
  padding: 8px; /* Makes the container 16x16 in order to show full icon. */
  vertical-align: text-bottom;
  /* same rationale as for .mimetype-fixed-container */
  background-image: url(../icons/mimetypes/unknown.png);
}

.mimetype-no-icon {
  background-image: none;
}

/* Previously the panel button rows were getting their padding from ".icon"
   which is now mimetype-fixed-container, but that was semantically sketchy and
   we needed the class name to be clearly about font icons with containers
   identified separately. */
.panel .item {
  padding: 0.5em 0.5em 0.5em 30px;
  background-color: transparent;
}

.panel label.panel-accel {
  display: block;
  width: 240px;
  padding: 0 0.5rem;
}

.panel .accel,
.panel .copy {
  font-size: 10px;
  border-radius: 2px;
  padding: 1px 3px;
  margin: 0 10px;
  border: 1px solid var(--page-border-color);
  background-color: var(--button-background);
  color: var(--button-color);
}

.panel .accel {
  /* simulate a keyboard key effect */
  font-family: monospace;
  box-shadow: 0 1px rgba(0, 0, 0, .8);
}

.panel .copy {
  height: 18px;
  width: 18px;
  padding: 1px;
  margin: 0 3px;
  cursor: pointer;
  vertical-align: middle;
}

.panel .copy.indicator {
  display: inline-block;
  cursor: unset;
}

.panel .copy:hover {
  background-color: var(--button-hover-background);
}

.panel .copy:active {
  background-color: var(--button-active-background);
}

.panel .copy svg {
  fill: currentColor;
}

.panel .copy:not(.copied) .tick-icon,
.panel .copy.copied .copy-icon {
  display: none;
}

/* MimeType Icons */
.mimetype-icon-build {
  background-image: url(../icons/mimetypes/build.png);
}
.mimetype-icon-c {
  background-image: url(../icons/mimetypes/c.png);
}
.mimetype-icon-conf {
  background-image: url(../icons/mimetypes/conf.png);
}
.mimetype-icon-cpp {
  background-image: url(../icons/mimetypes/cpp.png);
}
.mimetype-icon-cs {
  background-image: url(../icons/mimetypes/cs.png);
}
.mimetype-icon-css {
  background-image: url(../icons/mimetypes/css.png);
}
.mimetype-icon-diff {
  background-image: url(../icons/mimetypes/diff.png);
}
.mimetype-icon-folder {
  background: transparent url(../icons/mimetypes/folder.png) 0.5em 7px no-repeat;
  padding: 0.5em 0.5em 0.5em 30px; /* 30px = 16px icon + 7px padding above + a little more whitespace */
}
.mimetype-icon-h {
  background-image: url(../icons/mimetypes/h.png);
}
.mimetype-icon-html {
  background-image: url(../icons/mimetypes/html.png);
}
.mimetype-icon-iso {
  background-image: url(../icons/mimetypes/iso.png);
}
.mimetype-icon-image {
  background-image: url(../icons/mimetypes/image.png);
}
.mimetype-icon-java {
  background-image: url(../icons/mimetypes/java.png);
}
.mimetype-icon-js, .mimetype-icon-jsm, .mimetype-icon-mjs {
  background-image: url(../icons/mimetypes/js.png);
}
.mimetype-icon-mm {
  background-image: url(../icons/mimetypes/mm.png);
}
.mimetype-icon-php {
  background-image: url(../icons/mimetypes/php.png);
}
.mimetype-icon-py {
  background-image: url(../icons/mimetypes/py.png);
}
.mimetype-icon-rb {
  background-image: url(../icons/mimetypes/rb.png);
}
.mimetype-icon-sh {
  background-image: url(../icons/mimetypes/sh.png);
}
.mimetype-icon-svg {
  background-image: url(../icons/mimetypes/svg.png);
}
.mimetype-icon-tex {
  background-image: url(../icons/mimetypes/tex.png);
}
.mimetype-icon-txt {
  background-image: url(../icons/mimetypes/txt.png);
}
.mimetype-icon-ui {
  background-image: url(../icons/mimetypes/ui.png);
}
.mimetype-icon-unknown {
  background-image: url(../icons/mimetypes/unknown.png);
}
.mimetype-icon-vs {
  background-image: url(../icons/mimetypes/vs.png);
}
.mimetype-icon-xml {
  background-image: url(../icons/mimetypes/xml.png);
}