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

body.template-dynamic-view.can_edit {
  &:not(.preview-mode) {
    .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;
        }
      }
    }
  }
  .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;
  }
}

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

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