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

/**
 * @file
 * Table drag styling for off-canvas dialog.
 *
 * @see tabledrag.js
 *
 * @internal
 */

#drupal-off-canvas-wrapper {
  /* The draggable <tr> element. */
  & .draggable {
    &:hover,
    &:focus-within {
      background-color: var(--off-canvas-background-color-light);
    }

    /* Appears when the row is being dragged. */
    &.drag {
      cursor: move;
      background-color: var(--off-canvas-background-color-dark);
    }
  }

  & td {
    transition: background-color 0.3s ease;

    /* We have to horizontally align all descendent nodes including text nodes
     * that do not have wrapper elements. Since we use flex to do this, we need
     * try to keep it vertically centered, so we have to give it a minimum height
     * to match the rest of the table cells. */
    &:first-child {
      display: flex;
      align-items: center;
      min-height: 3.125rem;
      gap: var(--off-canvas-table-cell-padding);
    }

    & abbr {
      margin-inline: 0 0.3125rem;
      -webkit-text-decoration: none;
      text-decoration: none;
    }
  }

  & .tabledrag-handle {
    flex-shrink: 0;

    &::after {
      display: block;
      width: 1.25rem;
      height: 1.25rem;
      margin: 0;
      padding: 0;
      content: "";
      cursor: move;
      background-color: transparent;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: center;

      @media (forced-colors: active) {
        background: linktext;
        mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
        mask-repeat: no-repeat;
        mask-position: center;
      }
    }
  }

  /* Make the "row weight" <select> as small as possible. */
  & .tabledrag-hide select {
    all: revert;
  }

  & .tabledrag-changed-warning {
    margin-bottom: var(--off-canvas-vertical-spacing-unit);
    font-size: 0.875rem;
  }

  & .tabledrag-toggle-weight-wrapper {
    padding-top: 0.625rem;
    text-align: end;
  }

  & .indentation {
    width: 0.3125rem;
  }

  .touchevents & .draggable td {
    padding: 0 0.625rem;
  }

  .touchevents & .draggable .menu-item__link {
    display: inline-block;
    padding: 0.625rem 0;
  }

  .touchevents & a.tabledrag-handle {
    width: 2.5rem;
    height: 2.75rem;
  }
}