/* icons */
.icon.folder {
  background: transparent url(/static/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;
}
.icon {
  background-color: transparent;
  background-position: 0.5em center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  padding: 0.5em 0.5em 0.5em 30px;
}
.icon-container {
  background-color: transparent;
  background-repeat: no-repeat;
  float: right;
  padding: 8px; /* Makes the container 16x16 in order to show full icon. */
}

.panel label.panel-accel {
  padding: 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 */
.build {
  background-image: url(/static/icons/mimetypes/build.png);
}
/* The .c class is used in files for comments. This definition is there just to prevent overriding. */
.icon-container.c,
.icon.c {
  background-image: url(/static/icons/mimetypes/c.png);
}
.conf {
  background-image: url(/static/icons/mimetypes/conf.png);
}
.cpp {
  background-image: url(/static/icons/mimetypes/cpp.png);
}
.cs {
  background-image: url(/static/icons/mimetypes/cs.png);
}
.css {
  background-image: url(/static/icons/mimetypes/css.png);
}
/* Prevents display of diff icon in the panel, which has its own */
.results .diff,
.folder-content .diff {
  background-image: url(/static/icons/mimetypes/diff.png);
}
.h {
  background-image: url(/static/icons/mimetypes/h.png);
}
.html {
  background-image: url(/static/icons/mimetypes/html.png);
}
.iso {
  background-image: url(/static/icons/mimetypes/iso.png);
}
.image {
  background-image: url(/static/icons/mimetypes/image.png);
}
.java {
  background-image: url(/static/icons/mimetypes/java.png);
}
.js {
  background-image: url(/static/icons/mimetypes/js.png);
}
.mm {
  background-image: url(/static/icons/mimetypes/mm.png);
}
.php {
  background-image: url(/static/icons/mimetypes/php.png);
}
.py {
  background-image: url(/static/icons/mimetypes/py.png);
}
.rb {
  background-image: url(/static/icons/mimetypes/rb.png);
}
.sh {
  background-image: url(/static/icons/mimetypes/sh.png);
}
.svg {
  background-image: url(/static/icons/mimetypes/svg.png);
}
.tex {
  background-image: url(/static/icons/mimetypes/tex.png);
}
.txt {
  background-image: url(/static/icons/mimetypes/txt.png);
}
.ui {
  background-image: url(/static/icons/mimetypes/ui.png);
}
.unknown {
  background-image: url(/static/icons/mimetypes/unknown.png);
}
.vs {
  background-image: url(/static/icons/mimetypes/vs.png);
}
.xml {
  background-image: url(/static/icons/mimetypes/xml.png);
}