/* Media Browser Dialog Styling */
.ui-dialog {
  width: 100% !important;
  max-width: 1024px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Ensure the dialog content scales appropriately */
.ui-dialog .ui-dialog-content {
  width: 100% !important;
  max-width: none !important;
}

.ui-dialog .media-library-item--grid * {
  box-sizing: unset;
}

/* Media browser specific styling */
.ui-dialog[aria-describedby*='drupal-modal'],
.ui-dialog[aria-describedby*='media-browser'] {
  width: 100% !important;
  max-width: 1024px !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
  .ui-dialog {
    width: 95% !important;
    left: 2.5% !important;
    transform: none !important;
  }
}

@media (max-width: 768px) {
  .ui-dialog {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
}

@media screen and (min-width: 77em) {
  .media-library-item--grid {
    width: 25% !important;
  }

  /* Change the width for the modal and widget since there is less space. */
  .media-library-widget-modal .media-library-item--grid,
  .media-library-selection .media-library-item--grid {
    width: 25% !important;
  }

  /* The selected items in the add form should be shown a bit smaller. */
  .media-library-add-form__selected-media .media-library-item--small {
    width: 25% !important;
  }
}

.ui-dialog .media-library-view--widget .views-exposed-form {
  flex-wrap: nowrap;
}

.ui-dialog .dropzone .dz-message {
  margin: 0;
}