/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/*
 * @file
 *
 * Styling for Media Library.
 */

/*
 * The field widget shown on the entity create page.
 */

.field--widget-media-library-widget {
  .media-library-item__preview {
    cursor: move;

    img {
      border-start-start-radius: 2px;
      border-start-end-radius: 2px;
    }
  }

  .js-media-library-item:only-child .media-library-item__preview {
    cursor: inherit;
  }
}

/**
 * Negative margins compensate for modal dialog padding and compensate for
 * positioning that would otherwise hide the active tab indicator on the start.
 */

#media-library-wrapper {
  display: flex;
  margin-inline: calc(-1 * var(--admin-space-l));

  .messages-list,
  .messages {
    margin-block: 0 var(--admin-space-l);
  }

  /* "Grid" and "Table" buttons. */
  .views-display-link {
    position: relative;
    margin: 0;
    padding-inline-start: 1.375rem;
    white-space: nowrap;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--admin-color-text);
    background-image: none;
    font-size: 0.9375rem;
    line-height: 1rem;

    &::before {
      position: absolute;
      display: inline-block;
      width: 1rem;
      height: 1rem;
      content: "";
      background-color: var(--admin-color-text);
      inset-block-start: 1px;
      inset-inline-start: 0;
    }

    &.is-active {
      color: var(--admin-color-primary);
      font-weight: bold;

      &::before {
        background-color: var(--admin-color-primary);
      }
    }
  }

  .views-display-link-widget::before {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e  %3cg fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e    %3crect x='3' y='3' width='7' height='7'%3e%3c/rect%3e    %3crect x='14' y='3' width='7' height='7'%3e%3c/rect%3e    %3crect x='14' y='14' width='7' height='7'%3e%3c/rect%3e    %3crect x='3' y='14' width='7' height='7'%3e%3c/rect%3e  %3c/g%3e%3c/svg%3e");
  }

  .views-display-link-widget_table::before {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e  %3cg fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e    %3cline x1='8' y1='6' x2='21' y2='6'%3e%3c/line%3e    %3cline x1='8' y1='12' x2='21' y2='12'%3e%3c/line%3e    %3cline x1='8' y1='18' x2='21' y2='18'%3e%3c/line%3e    %3cline x1='3' y1='6' x2='3.01' y2='6'%3e%3c/line%3e    %3cline x1='3' y1='12' x2='3.01' y2='12'%3e%3c/line%3e    %3cline x1='3' y1='18' x2='3.01' y2='18'%3e%3c/line%3e  %3c/g%3e%3c/svg%3e");
  }
}

#media-library-content {
  width: 100%;
  padding: 1em;
  border-color: var(--admin-color-border);
  border-inline-start: 0 none;
  outline: none;

  .media-library-menu + & {
    z-index: var(--vertical-tabs-menu--z-index);
    border-inline-start: var(--vertical-tabs-border);
    box-shadow: var(--vertical-tabs-shadow);
  }
}

/* Generic media add form styles. */

.media-library-add-form--without-input .form-item {
  margin-inline-end: 1rem;
}

.media-library-add-form__input-wrapper {
  .form-item--upload {
    margin-block-start: 0;
    margin-inline-end: 0;
  }

  .dropzone-enable .button {
    margin: 0;
  }
}

/* Form within media library that allows you to upload additional media. */

.media-library-add-form {
  .messages-list:has(.messages) {
    margin-block: var(--admin-space-m);
  }

  .file-upload-help {
    margin: 0.5rem 0 0;
  }
}

/* Style the media add oEmbed form. */

.media-library-add-form--oembed {
  .media-library-add-form__input-wrapper {
    display: flex;
    align-items: center;

    @media screen and (max-width: 37.5em) {
      display: block;
    }
  }

  &.media-library-add-form--without-input .form-item-url {
    margin-block-end: 0;
  }
}

.media-library-add-form-oembed-url {
  width: 100%;
}

.media-library-select-all {
  flex-basis: 100%;
  box-sizing: border-box;
  width: 100%;
  color: var(--admin-color-text-loud);
  border-block-end: 1px solid var(--admin-color-border-loud);
  border-radius: 0;
  background: var(--admin-color-bg-surface);
  margin-block: 0 0.625rem;
  margin-inline: 0 0.5rem;
  padding-block: 0 var(--admin-space-m);
  padding-inline: var(--admin-space-m);

  input {
    margin-inline-end: 0.625rem;
  }
}

.media-library-add-form__selected-media .details-wrapper,
.media-library-view .form--inline {
  display: flex;
  flex-wrap: wrap;
}

.media-library-views-form__header {
  flex-basis: 100%;

  .form-item {
    margin-inline-end: 0.5rem;
  }
}

.media-library-views-form__rows {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
}

.media-library-widget-modal {
  /* By default, the dialog is too narrow to be usable. @see Drupal.ckeditor5.openDialog() */
  &.ui-dialog--narrow {
    min-width: min(75%, 93.75rem);
  }

  .ui-dialog-buttonpane {
    display: flex;
    flex-direction: column;
    align-items: center;

    .form-actions,
    .field-actions {
      flex: 1;
    }

    .form-actions {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      margin-block-start: 0;
      white-space: nowrap;

      .button:not(:last-child) {
        margin-inline-end: var(--admin-space-xs);
      }
    }

    .media-library-selected-count {
      flex-grow: 1;
      margin-block-end: var(--admin-space-s);

      /* cspell:disable-next-line */
      @media (min-width: 36.75em) {
        margin-block-end: 0;
        margin-inline-start: 0;
      }
    }

    /* cspell:disable-next-line */
    @media (min-width: 36.75em) {
      flex-direction: row;
    }
  }
}

/*
 * Selection widget area shown on the parent form after items are
 * inserted.
 */

.media-library-selection {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
}

/* Media library widget styles. */

.media-library-widget {
  position: relative;
}

fieldset.media-library-widget {
  .media-library-edit__link {
    margin: var(--admin-space-xs);
  }
}

.media-library-widget__toggle-weight {
  position: absolute;
  inset-block-start: var(--admin-space-s);
  inset-inline-end: var(--admin-space-m);
  -webkit-text-decoration: none;
  text-decoration: none;

  .fieldset.media-library-widget & {
    padding: var(--admin-space-xs);
    font-size: var(--admin-font-size-2xs);
    line-height: 1;
  }
}

/* The <li> that is shown after a media item has been uploaded */

.media-library-add-form__media {
  position: relative;
  display: flex;
  gap: 1.25rem;
  padding: 0.625rem;
  border-block-end: 1px solid #c0c0c0;

  /* Do not show the bottom border and padding for the last item. */
  &:last-child {
    padding-block-end: 0;
    border-block-end: 0;
  }
}

/*
 * Only renders after a file is uploaded via the add-form. Coverage matrix never
 * completed an upload.
 */

.media-library-add-form__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.75rem;
  background: var(--admin-color-bg);
}

.media-library-add-form__fields {
  display: grid;
  flex-grow: 1;
  gap: 0.625rem;

  .form-item,
  .form-managed-file__meta {
    margin-block: 0;
  }
}

.media-library-add-form__remove-button {
  position: absolute;
  inset-inline-end: 0;

  &.button--extrasmall {
    margin: var(--admin-space-xs) 0;
  }
}

.media-library-selected-count {
  margin: 0 var(--admin-space-l);
  color: var(--admin-color-text-soft);
}

.media-library-widget-empty-text {
  margin-inline: 0;
  color: var(--admin-color-text-soft);
}

.media-library-open-button {
  margin-block-start: 0;
}

.media-library-view {
  display: grid;
  gap: var(--admin-space-l);

  .view-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9375rem;
    padding: var(--admin-space-m);
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--admin-color-text);
    border-radius: var(--admin-radius-m);
    background: var(--admin-color-bg-raised);
    box-shadow: var(--admin-shadow-1);
  }

  .views-exposed-form {
    margin-block: 0;
  }
}