v1/web/themes/contrib/gin/styles/components/paragraphs.scss

.paragraphs-tabs-wrapper {
  tr {
    &:hover, &:focus {
      .gin--dark-mode &, & {
        background-color: inherit;
      }
    }
  }

  .paragraphs-subform {
    margin-top: 0;
    margin-right: var(--gin-spacing-m);
  }

  .field-multiple-table {
    > tbody {
      > .draggable {
        > td + td {
          width: 100%;
        }
      }
    }

    .draggable {
      display: block;
      padding: var(--gin-spacing-m) var(--gin-spacing-xs);
      margin-top: var(--gin-spacing-m);
      border: 1px solid var(--gin-border-color-table);
      border-radius: var(--gin-border-m);
      box-shadow: 4px 4px 10px var(--gin-bg-layer2);

      // Current draggable item
      &.drag {
        background-color: var(--gin-bg-warning-light);
      }

      // Flag Changes
      &.drag-previous > .tabledrag-cell {
        position: relative;

        &::before {
          content: "";
          display: block;
          position: absolute;
          top: var(--gin-spacing-xs);
          left: 0;
          width: 4px;
          height: calc(100% - var(--gin-spacing-m));
          background: var(--gin-color-warning);
          border-radius: var(--gin-border-xxs);
        }
      }

      td {
        padding: var(--gin-spacing-xxs);
      }

      .has-multiple-fields-remove-button {
        width: 100%;
        padding-right: 0 !important;
      }

      .tabledrag-handle::after {
        mask-image: icon('drag-dots');
        mask-repeat: no-repeat;
        mask-position: center center;
        mask-size: 16px 16px;
      }

      .tabledrag-changed {
        display: none;
      }

      // Highlight current paragraph.
      &:hover,
      &:focus-within {
        position: relative;
        border: 1px solid var(--gin-color-text);
        box-shadow: 0 0 0 1px var(--gin-color-text);
      }
    }
  }

  .paragraph-type-label {
    font-size: var(--gin-font-size);
    font-weight: var(--gin-font-weight-heavy) !important;
    font-style: normal;
    color: var(--gin-color-title);
    position: static;
    border: 0 none;
    padding-left: 0;
  }

  .paragraphs-subform {
    .paragraph-type-label {
      font-size: var(--gin-font-size-s);
    }
  }

  .paragraph-type-add-modal,
  .field--widget-paragraphs .paragraphs-dropbutton-wrapper {
    margin-right: var(--gin-spacing-xs);
  }
}

.paragraph {
  .contextual {
    display: none;
  }
}

.paragraphs-subform {
  .form-item {
    margin-bottom: var(--gin-spacing-l);
  }
}

.paragraphs-add-wrapper,
.paragraphs-dropbutton-wrapper {
  .button--small {
    margin-top: var(--gin-spacing-xs);
    margin-bottom: var(--gin-spacing-xs);
  }
}

.paragraphs-dropdown-toggle {
  position: relative;
  margin: var(--gin-spacing-xs) 0;
  background: none;

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: none;
    background-color: var(--gin-color-text-light);
    mask-image: icon('more');
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 16px 16px;
  }

  &:hover,
  &:active,
  &:focus {
    background-color: var(--gin-color-primary-light);
    border: 0 none;

    &::after {
      background-color: var(--gin-color-primary);
    }
  }
}

html.js .field--widget-entity-reference-paragraphs,
html.js .field--widget-paragraphs {
  .draggable .tabledrag-handle {
    min-width: 20px;

    @include mq(medium) {
      min-width: 24px;
    }

    &::after {
      position: relative;
      left: 0;
      padding: 0;
      margin-left: 0;
    }
  }
}

.js .paragraphs-collapsed-description::after,
.js .draggable:hover .paragraphs-collapsed-description::after {
  top: 2px;
  background: var(--gin-bg-layer2);
}

html.js .field--widget-entity-reference-paragraphs {
  .draggable .tabledrag-handle {
    min-width: 32px;

    @include mq(medium) {
      min-width: 48px;

      &::after {
        top: -2px;
        left: 8px;
      }
    }
  }
}

.paragraphs-collapsed-description::after,
.draggable:hover .paragraphs-collapsed-description::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--gin-bg-layer) 100%);
}

.js .field--widget-paragraphs .paragraphs-dropbutton-wrapper .dropbutton-multiple {
  padding: var(--gin-spacing-xs);
}

html.js .field--widget-paragraphs .paragraphs-dropbutton-wrapper .dropbutton-multiple {
  .dropbutton-widget {
    margin-right: var(--gin-spacing-xs);
  }
}

html.js .field--widget-paragraphs th .paragraphs-actions .paragraphs-dropdown {
  top: 0;
  right: calc(var(--gin-spacing-xxs) * -1);
}

.paragraphs-dropdown-actions {
  color: var(--gin-color-button-text);
  background: var(--gin-bg-layer3);
  border: 0 none;
  border-radius: var(--gin-border-xs);
  box-shadow: var(--gin-shadow-l2);

  .paragraphs-dropdown-action.button {
    font-size: var(--gin-font-size-xs);
    padding: var(--gin-spacing-xs) var(--gin-spacing-m);
    margin: 0;
    border: 0 none !important;
  }
}

.js .paragraph-type-title {
  align-self: center;
}

html.js .paragraph-type-icon {
  padding: var(--gin-spacing-xxs);
  margin-right: var(--gin-spacing-xs);
}

.js .paragraph-top {
  grid-template-columns: auto auto 1fr auto;
}

.paragraphs-icon-changed {
  background-size: auto;
  height: 32px;
  width: 32px;
}

// Darkmode overrides
.gin--dark-mode {
  .paragraphs-tabs-wrapper .field-multiple-table .draggable {
    background: var(--gin-bg-layer2);
    box-shadow: none;
  }

  .paragraphs-dropdown-actions {
    background: var(--gin-bg-layer2);
    border-color: var(--gin-border-color);
    box-shadow: 0 2px 6px 0 var(--gin-bg-app);
  }

  .paragraph-type-icon {
    background-color: var(--gin-color-primary);
  }

  .paragraphs-type-icon {
    box-shadow: inset 0 0 0 10px var(--gin-bg-layer);
    background-color: #fff;
  }
}

.js .paragraphs-description .summary-content {
  color: var(--gin-color-text);
}

// Drag & Drop
.paragraphs-dragdrop {
  &__list {
    --dnd-item-ghost-border: var(--gin-color-primary);
    --dnd-item-ghost-bg: var(--gin-bg-item-hover);
  }

  &__item {
    padding-top: var(--gin-spacing-xs);
    padding-bottom: var(--gin-spacing-xs);
    background-color: var(--gin-bg-layer3);
    border-radius: var(--gin-border-m);
  }

  &__icon {
    top: var(--gin-spacing-xs);
  }
}

.js .paragraph-type-add-modal-button:hover {
  background: var(--gin-color-primary);
}

.paragraphs-dragdrop__label--field {
  text-transform: none;
}

// Classic Paragraphs
.field--widget-entity-reference-paragraphs {
  // Ugly addressing the title, but let's go
  > div > .form-wrapper > strong {
    display: block;
    margin-top: var(--gin-spacing-xl);
  }

  // No Paragraph added yet text
  // No dedicated classes so targeting the element as good as possible
  .form-wrapper .form-wrapper > em {
    display: block;
    padding: var(--gin-spacing-m) 0;
  }

  // Add buttons
  .form-actions {
    align-items: center;

    .dropbutton-multiple {
      margin-right: var(--gin-spacing-xs);

      // Support different paragraphs versions
      .placeholder,
      ~ .placeholder {
        margin-left: var(--gin-spacing-xxs);
      }
    }
  }

  tr.draggable .tabledrag-handle::after {
    left: 8px;
  }
}

.toolbar-fixed .is-horizontal .paragraphs-tabs {
  padding: var(--gin-spacing-xs) var(--gin-spacing-m) !important;
  background-color: var(--gin-bg-layer3);
  border-radius: var(--gin-border-s);

  &:first-of-type {
    z-index: 100;
    top: calc(var(--gin-toolbar-y-offset) + var(--gin-height-sticky));
  }

  .tabs__tab {
    float: left;
    margin-right: var(--gin-spacing-m);

    a {
      display: block;
      padding: var(--gin-spacing-xs) 0;
      color: var(--gin-color-text);
    }

    &.is-active {
      a {
        color: var(--gin-color-primary);

        &::after {
          pointer-events: none;
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          display: block;
          width: 100%;
          border-bottom: 2px solid var(--gin-color-primary);
        }
      }
    }
  }
}