.media-library-item--grid .field--name-field-description {
  margin-left: 0.5rem;
  padding: 0.3125rem;
}

/* Overriding from docroot/core/themes/claro/css/theme/media-library.css for media widget display with more
 specificity to beat claro default. Keeping it wider allows lengthy strings to fit neatly in the card. */
@media screen and (min-width: 77em) {
  .media-library-widget-modal .media-library-item.media-library-item--grid,
  .media-library-selection .media-library-item.media-library-item--grid {
    width: 33.3%;
  }
}

// targeting lengthy PDF filenames with underscores
.file--application-pdf {
  word-break: break-word;
}

.downloadable-file-link {
  padding-left: 20px;
  position: relative;

  &::before {
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 16px;
    position: absolute;
    top: 2px;
    width: 16px;
  }
}

.downloadable-file-link--document::before {
  background-image: url("../images/icons/000000/download.svg");
}

.downloadable-file-link--video::before {
  background-image: url("../images/icons/000000/play.svg");
}

.downloadable-file-link--image::before {
  background-image: url("../images/icons/000000/download.svg");
}

// Fix image hover state
.media-library-item__preview-wrapper {
  .media-library-item__attributes {
    bottom: 8px;
    max-width: calc(100% - 1.7rem);
  }
}

.form-item--image-0 {
  .form-managed-file.no-upload {
    display: flex;
  }
}

.image-widget {
  &.form-managed-file.has-meta .form-managed-file__image-preview {
    margin: 0 0 1rem 1rem;
    max-width: 600px;
  }

  .form-managed-file__main {
    display: flex;
  }

  .form-managed-file__meta-items {
    .form-item__description {
      margin-right: 16px;
    }
  }

  .image-preview__img-wrapper {
    box-shadow: unset;
    display: flex;
    flex-direction: row;
    justify-content: end;

    img {
      width: 100%;
    }
  }
}
