/*@svg-load pdf url( 'filetype-pdf.svg' ) {}
@svg-load jpg url( 'filetype-jpg.svg' ) {}
@svg-load doc url( 'filetype-doc.svg' ) {}
@svg-load docx url( 'filetype-docx.svg' ) {}
@svg-load xls url( 'filetype-xls.svg' ) {}
@svg-load xlsx url( 'filetype-xlsx.svg' ) {}
@svg-load otf url( 'filetype-otf.svg' ) {}
@svg-load txt url( 'filetype-txt.svg' ) {}
@svg-load download url( 'file-arrow-down.svg' ) {}

$support: pdf jpg doc docx xls xlsx otf txt;*/

.file {
  position: relative;
}

.file-icon {
  width: 1.5em;
}

.file-icon svg {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.file-size {
	padding-left: 8px;

    &::after{content:')'}
    &::before{content:'('}
}

.file-link > a {
	display: flex;
  gap: .5em;
  align-items: flex-start;
  position: absolute;
  inset: 0;
  width: 100%;
  line-height: 1.05;
  padding-left: 2em;
}

.file:has(.file-link) .file-size {
  padding-left: 2em;
}

.file:has(.file-link) {
  color: var(--beehive-color-primary-override, var(--beehive-color-primary, #777));
  line-height: 1;
}

.file:has(.file-link):hover {
  color: var(--beehive-color-secondary-override, var(--beehive-color-secondary, #222));
}