.file-type {
  display: flex;
	align-items: center;
	justify-content: center;
  width: 40px;
  height: 40px;
}
.file-type--inline {
  display: inline-block;
}
.file-type__icon {
  width: 40px;
  height: 40px;
  display: inline-block;
  background: url("../images/svg/docs.svg") 0px -84px no-repeat;
  float: left;
}
.file-type__icon--jpg {
  background-position: -42px -42px;
}
.file-type__icon--rtf {
  background-position: 0px -42px;
}
.file-type__icon--tiff {
  background-position: -84px -42px;
}
.file-type__icon--ppt {
  background-position: -84px -126px;
}
.file-type__icon--pdf {
  background-position: 0px -0px;
}
.file-type__icon--word {
  background-position: -42px 0px;
}
.file-type__icon--png {
  background-position: -84px -84px;
}
.file-type__icon--txt {
  background-position: -42px -84px;
}
.file-type__icon--excel {
  background-position: -84px 0px;
}
.file-type__icon--gif {
  background-position: 0px -126px;
}
.file-type__icon--bmp {
  background-position: -42px -126px;
}

/* hover */
.file-type .file-type__icon-hover {
	position: absolute;
	opacity: 0;
	visibility: hidden;
}
@media (any-hover: hover) {
	.file-type-parent--with-hover:hover .file-type {
		background: var(--darkerblack_bg_black);
	}
	.file-type-parent--with-hover:hover .file-type__icon {
		opacity: 0;
		visibility: hidden;
	}
	.file-type-parent--with-hover:hover .file-type__icon-hover {
		opacity: 1;
		visibility: visible;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.file-type-parent--with-hover .file-type, 
	.file-type-parent--with-hover .file-type__icon {
		transition: 0.2s ease background;
	}
	.file-type-parent--with-hover .file-type__icon,
	.file-type__icon-hover {
		transition: 0.2s ease opacity, 0.2s ease visibility;
	}
}