:root {
  --file-icon-size: 4rem;
}

.file-view {
  display: grid;
  grid-template-columns: var(--file-icon-size) auto;
  grid-column-gap: 1rem;
}

.file-view.image-file {
  grid-template-columns: 1fr minmax(40%, 1fr);
  grid-column-gap: 2rem;
}

.file-view.image-file header {
  background: #f2f2f2 no-repeat center center;
  background-size: contain;
  position: relative;
}

.file-view.image-file header img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.file-view.non-image-file header .file-type-icon svg {
  width: var(--file-icon-size);
  height: var(--file-icon-size);
}

.file-view .details .filename {
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-view .details .row {
  color: #555;
}

.file-view .details strong {
  font-weight: 700;
}

.file-view .buttonset {
  margin-top: 1rem;
}

.file-view .buttonset .button {
  margin-left: 0.5rem;
}

.file-view .buttonset .button:first-child {
  margin-left: 0;
}

.file-view img {
  height: 100%;
}
