/// **************************************************
/// Add or select media form styles

#media-library-add-form-wrapper {
  background-color: #d9e8f4;
  padding: 1rem;

  .form-type-managed-file {
    margin-bottom: 0;
  }

}

.js-media-library-views-form {
  .media-library-item.js-media-library-item.js-click-to-select.views-row.media-library-item--grid {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #888;
    // Only when mouse is hovering over media.
    &.is-hover {
      box-shadow: 0 0 0 2px #000;
    }

    // Show when media is checked.
    &.checked {
      border-color: #0678be;
      box-shadow: 0 0 0 2px #0678be;
    }

    // Prevent multiple media from being selected.
    &.media-library-item--disabled {
      pointer-events: none;

      input[type="checkbox"] {
        display: none;
      }

      .media_selected-image {
        .js-media-library-item-preview {
          border-color: #ccc;
        }
      }
    }
  }
}


/// **************************************************
/// Styles for the image thumbnails in the field widget

.js-media-library-selection.js-form-wrapper.form-wrapper {
  .js-media-library-item {
    border: 1px solid #888;
    border-radius: 15px;
  }
  .media-librayr-item--name {
    white-space: normal !important;
  }
}
