:root {
  --dynamicpages-primary-color: #68bcf3;
}

body.template-dynamic-view.can_edit {
  &:not(.preview-mode):not(:has(.modal.show .dynamic-row)) {
    /* Apply only out of the modal */
    & > main > .dynamic-row,
    #dynamic_pages_content > .dynamic-row {
      background-color: #f5f5f5;
      padding: 1rem;
      margin: 1rem 0;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      &:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        background-color: #e5e5e5;
      }
      &.state-private {
        .content {
          opacity: 0.3;
        }
      }
    }
  }
  .rows-mangement {
    background-color: #f5f5f5;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  .edit-options {
    display: flex;
    opacity: 1;
    transition:
      opacity 0.3s ease,
      visibility 0.3s;
  }

  &.preview-mode .edit-options {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    overflow: hidden;
  }
  /* Plone icons css*/
  .plone-icon {
    height: 1em;
    width: auto;
  }

  .icon-inline {
    vertical-align: middle;
    bottom: -0.125em;
    position: relative;
  }

  .icon-x15 {
    height: 1.5em;
    width: auto;
  }

  .icon-x2 {
    height: 2em;
    width: auto;
  }

  .icon-x3 {
    height: 3em;
    width: auto;
  }

  .icon-x4 {
    height: 4em;
    width: auto;
  }

  .icon-x5 {
    height: 5em;
    width: auto;
  }

  /* Estiloa heldulekuarentzat (handle) */
  .drag-handle {
    cursor: grab;
    color: #aaa;
    margin-right: 10px;
  }

  .drag-handle:hover {
    color: #333;
  }

  /* SortableJS-k erabiltzen dituen klaseak */
  .sortable-ghost {
    opacity: 0 !important;
    background-color: #c8ebfb !important;
    border: 2px dashed var(--dynamicpages-primary-color);
  }

  .sortable-chosen,
  .sortable-drag {
    opacity: 1 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
}

.no-underline {
  text-decoration: none;
}

.offcanvas-body {
  .available-view {
    &:hover {
      background-color: var(--dynamicpages-primary-color) !important;
      a {
        color: white !important;
      }
    }
  }
}