/* Hide weight select toggle. Who uses this anyway? */
.js-media-library-widget-toggle-weight {
  display: none;
}

/* Basic Media Library layout tweaking for some themes. */
.media-library-add-form {
  margin-bottom: 1rem;
}

.media-library-view.view > * {
  margin-bottom: 0;
}

.media-library-view .form--inline > * {
  margin-bottom: 0;
}

.media-library-view .form--inline * {
  margin-top: .25rem;
  margin-right: .25rem;
}

.media-library-view .form--inline input,
.media-library-view .form--inline select {
  display: block;
}

.media-library-view .form--inline [id^='edit-actions'] {
  display: flex;
  align-items: end;
}

.media-library-view .form--inline  [id^='edit-actions'] button,
.media-library-view .form--inline  [id^='edit-actions'] input {
  margin: 0;
}

.media-library-views-form .views-table {
  width: 100%;
}

[dir="ltr"] ul.media-library-add-form__added-media {
  margin-left: 0;
}

.media-library-item__attributes {
  width: 100%;
}

/* Making visible the 'blue' border around a Media Library item on all thmes as well as and fixing some space issues. */
.media-library-selection *:before,
.media-library-selection *:after,
.media-library-selection *,
.media-library-views-form__rows *:before,
.media-library-views-form__rows *:after,
.media-library-views-form__rows * {
  box-sizing: content-box;
}

/* Making the image center in all circumstances as well as graying out. */
.media-library-item__preview {
  display: flex;
  justify-content: center;
  background-color: #ebebeb;
}

/* Fix scrollbar issue with Dialog/Modal. */
.ui-dialog-content .media-library-wrapper {
  margin: 0;
}

.ui-dialog-content .media-library-content {
  padding: 0;
  border-left: 0;
}

/* Remove the (Claro- green focus border. */
.media-library-add-form__added-media:focus,
.media-library-item--grid:focus {
  box-shadow: none!important;
}

.media-library-menu__link:focus:after,
.media-library-item--grid.is-focus:before {
  border: none!important;
}

/* Transform the (Claro) green focus border to a consistent blue one to highlight the drag and drop. */
.media-library-selection .media-library-item--grid:focus .media-library-item__preview-wrapper {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #0036b1!important;
}