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

/**
 * @file
 * System admin module: modules page.
 */

:root {
  --module-table-cell-padding-vertical: var(--admin-space-m);
  --module-table-cell-padding-horizontal: calc(var(--admin-space-m) - (var(--input-border-size) * 2));
}

.modules-table-filter,
.permissions-table-filter {
  padding: 0.25rem var(--admin-space-l);
  border: 1px solid var(--admin-color-border);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 2px 4px rgb(0, 0, 0, 0.1);

  /* Visually hide the module filter input description. */
  & .form-item__description {
    position: absolute !important;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    word-wrap: normal;
  }
}

.package-listing .gin-details__summary::after {
  content: none;
}

.modules-table-filter {
  padding: 0;
  border: 0 none;
  box-shadow: none;
}

.gin-details.module-list__module-details {
  margin-top: 2rem;
  margin-bottom: 0;
  border: none;
  box-shadow: none;
}

.module-list {
  margin-top: 0;
}

.module-list__module {
  color: var(--admin-color-text);
  border-block-end: 1px solid var(--admin-color-border);
  background: none;

  &:hover {
    background: none;
  }

  & td {
    height: auto;
    padding: var(--module-table-cell-padding-vertical) var(--module-table-cell-padding-horizontal);
    vertical-align: top;
  }

  /* Set width only on wider view where description is visible by default. */
  @media screen and (min-width: 60em) {
    width: 25%;
  }
}

.module-list__module-name {
  font-weight: bold;
}

.module-list__checkbox {
  width: 4%;
  padding-inline-start: 0.6875rem; /* LTR */
  text-align: start;

  & .form-type--checkbox {
    margin: 0;
    line-height: var(--details-line-height);
  }

  & .form-checkbox:not([disabled]) {
    cursor: pointer;
  }
}

td.module-list__description {
  padding-inline-end: 0;
}

.gin-details.module-list__module-details {
  margin: 0;
}

.gin-details__summary.module-list__module-summary {
  padding-top: var(--module-table-cell-padding-vertical);
  padding-bottom: var(--module-table-cell-padding-vertical);
  font-weight: normal;
  line-height: var(--details-line-height);

  &::before {
    top: calc(var(--admin-space-m) + var(--admin-space-s));
  }
}

.module-details__description {
  font-size: var(--admin-space-s);
  line-height: 0.9375rem;
}

.gin-details__wrapper.module-details__wrapper {
  margin-block: 0;
}

.module-details__requirements {
  margin-bottom: var(--admin-space-m);
}

.module-details__links {
  position: relative;
  /* Negative margin matches the value of action link's top padding. */
  margin-top: calc((var(--admin-space-s) - ((var(--admin-space-l) - var(--admin-space-s)) / 2)) * -1);
  margin-bottom: var(--admin-space-m);

  & .action-link + .action-link {
    margin-inline-start: 0;
  }
}

.gin-details .tableresponsive-toggle {
  padding: var(--admin-space-m) var(--admin-space-m) var(--admin-space-m) 0;

  &::before {
    /* This adjustment is necessary for better alignment with the adjacent
       button text. */
    position: relative;
    top: -1px;
    display: inline-block;
    width: calc(var(--admin-space-m) * 2);
    height: 1.25rem;
    content: "";
    cursor: pointer;
    vertical-align: text-top;
    background: url("data:image/svg+xml,%3csvg height='16' stroke='%23545560' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e") no-repeat center;
    background-size: contain;
  }

  &:hover {
    color: var(--admin-color-link-hover);
    background-color: var(--admin-color-bg-item-hover);

    &::before {
      background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%230036b1' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
    }
  }
}

.gin-details .tableresponsive-toggle-columns button {
  margin-top: var(--admin-space-xs);
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--admin-color-text-soft);
  font-weight: bold;
}

.gin-details .admin-missing {
  color: var(--admin-color-text-error);
}