/**
 * The following styles get applied inside the editor only.
 */

.wp-block-documentation {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 500px; // Hauteur minimale pour l'éditeur

  .documentation-layout {
    display: flex;
    max-width: 1700px;
    margin: 0 auto;
    background: var(--orphic-wp-block-plugin-color-background);
    position: relative;
    width: 100%;
    
    .documentation-nav {
      position: sticky;
      top: 0;
      align-self: flex-start;
      max-height: 80vh; // Pour l'éditeur, limiter la hauteur
      overflow-y: auto;
      padding: var(--orphic-wp-block-spacing-lg);
      border-right: var(--orphic-wp-block-border-width-thin) solid var(--orphic-wp-block-plugin-color-border);
      background: var(--orphic-wp-block-plugin-color-background);
      width: 250px;
      flex-shrink: 0;
      
      .nav-section{
        padding: var(--orphic-wp-block-spacing-sm) var(--orphic-wp-block-spacing-md);
      }
      /* Scrollbar styling */
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      
      &::-webkit-scrollbar-thumb {
        background-color: var(--orphic-wp-block-plugin-color-border);
        border-radius: var(--orphic-wp-block-border-radius-sm);
      }
      
      h3 {
        display: flex;
        align-items: center;
        gap: var(--orphic-wp-block-spacing-sm);
        font-size: var(--orphic-wp-block-font-size-lg);
        margin-bottom: var(--orphic-wp-block-spacing-md);
        color: var(--orphic-wp-block-plugin-color-text);
        position: sticky;
        top: 0;
        background: var(--orphic-wp-block-plugin-color-background-hover);
        padding: var(--orphic-wp-block-spacing-sm) 0;
        z-index: 1;
        font-weight: var(--orphic-wp-block-font-weight-semibold);

        .section-icon {
          height: fit-content;
          width: fit-content;
          display: flex;
          align-items: center;
          justify-content: center;
          svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
            flex-shrink: 0;
          }
        }
      }
      
      .nav-item {
        margin-bottom: var(--orphic-wp-block-spacing-sm);
        cursor: pointer;
        color: var(--orphic-wp-block-plugin-color-text);
        font-size: var(--orphic-wp-block-font-size-sm);
        font-weight: var(--orphic-wp-block-font-weight-medium);
        text-decoration: none;
        display: block;
      }
    }
    
    .documentation-content {
      position: relative;
      overflow-y: auto;
      padding: var(--orphic-wp-block-spacing-xl);
      background: var(--orphic-wp-block-plugin-color-background);
      flex: 1;
      min-height: 400px;
      
      /* Scrollbar styling */
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      
      &::-webkit-scrollbar-thumb {
        background-color: var(--orphic-wp-block-plugin-color-border);
        border-radius: var(--orphic-wp-block-border-radius-sm);
      }
      
      > * {
        max-width: 100%;
      }
      
      h1, h2, h3, h4, h5, h6 {
        margin-bottom: var(--orphic-wp-block-spacing-md);
        scroll-margin-top: var(--orphic-wp-block-spacing-xl);
        color: var(--orphic-wp-block-plugin-color-text);
      }
      
      p {
        line-height: 1.6;
        margin-bottom: var(--orphic-wp-block-spacing-md);
        color: var(--orphic-wp-block-plugin-color-text);
      }

      img {
        height: auto;
        border-radius: var(--orphic-wp-block-border-radius-md);
      }

      pre {
        overflow-x: auto;
        background: var(--orphic-wp-block-plugin-color-section-background);
        padding: var(--orphic-wp-block-spacing-md);
        border-radius: var(--orphic-wp-block-border-radius-md);
        border: var(--orphic-wp-block-border-width-thin) solid var(--orphic-wp-block-plugin-color-border);
      }
    }
  }
}

// Améliore la visibilité du bloc dans l'éditeur
.is-selected .wp-block-documentation {
  border: 2px dashed var(--orphic-wp-block-plugin-color-primary);
  border-radius: var(--orphic-wp-block-border-radius-md);
}

// Styles pour le panneau latéral d'édition
.section-manager {
  .add-section {
    margin-bottom: var(--orphic-wp-block-spacing-lg);
    
    .components-button {
      margin-top: var(--orphic-wp-block-spacing-sm);
      width: 100%;
      justify-content: center;
    }
  }

  .section-list {
    .section-item {
      margin-bottom: var(--orphic-wp-block-spacing-lg);
      padding: var(--orphic-wp-block-spacing-md);
      background: var(--orphic-wp-block-plugin-color-section-background);
      border-radius: var(--orphic-wp-block-border-radius-md);
      border: var(--orphic-wp-block-border-width-thin) solid var(--orphic-wp-block-plugin-color-border);

      .section-header {
        display: flex;
        flex-direction: column;
        gap: var(--orphic-wp-block-spacing-md);
        margin-bottom: var(--orphic-wp-block-spacing-md);
        
        .controls-wrapper {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .section-controls {
            display: flex;
            gap: var(--orphic-wp-block-spacing-xs);
          }
          
          .section-actions {
            display: flex;
            gap: var(--orphic-wp-block-spacing-xs);
          }
        }
        
        h3 {
          margin: 0 0 0 var(--orphic-wp-block-spacing-sm);
          padding: 0;
          font-size: var(--orphic-wp-block-font-size-md);
          display: flex;
          align-items: center;
          gap: var(--orphic-wp-block-spacing-sm);
          color: var(--orphic-wp-block-plugin-color-text);
          font-weight: var(--orphic-wp-block-font-weight-medium);
          
          .section-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            
            svg {
              width: 100%;
              height: 100%;
              fill: currentColor;
            }
          }
        }
        
        .edit-section {
          width: 100%;
          background: var(--orphic-wp-block-plugin-color-section-background);
          border-radius: var(--orphic-wp-block-border-radius-md);
          padding: var(--orphic-wp-block-spacing-md);
          
          .components-base-control {
            margin-bottom: var(--orphic-wp-block-spacing-md);
          }
          
          .components-textarea-control__input {
            font-family: monospace;
            font-size: var(--orphic-wp-block-font-size-xs);
            min-height: 80px;
          }
        }
      }
    }
  }
}

// Styles communs pour les éléments de section et de lien
.section-item,
.link-item {
  border: var(--orphic-wp-block-border-width-thin) solid var(--orphic-wp-block-plugin-color-border);
  border-radius: var(--orphic-wp-block-border-radius-md);
  margin-bottom: var(--orphic-wp-block-spacing-sm);
  padding: var(--orphic-wp-block-spacing-md);
  transition: all var(--orphic-wp-block-duration-fast) var(--orphic-wp-block-ease-default);
  
  &.is-dragging {
    opacity: var(--orphic-wp-block-opacity-disabled);
    box-shadow: var(--orphic-wp-block-shadow-md);
  }
  
  &.drag-over {
    border: var(--orphic-wp-block-border-width-medium) dashed var(--orphic-wp-block-plugin-color-primary);
    padding: calc(var(--orphic-wp-block-spacing-md) - 1px);
  }
}

.section-item {
  background: var(--orphic-wp-block-plugin-color-background);
}

.link-item {
  position: relative;
  background: var(--orphic-wp-block-plugin-color-section-background);
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  .edit-link {
    width: 100%;
    padding: var(--orphic-wp-block-spacing-sm);
  }
  
  .link-actions {
    display: flex;
    gap: var(--orphic-wp-block-spacing-xs);
  }

  .link-title {
    flex: 1;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--orphic-wp-block-plugin-color-text);
    font-size: var(--orphic-wp-block-font-size-sm);
  }
}

// Styles pour la poignée de glisser-déposer
.drag-handle {
  cursor: grab;
  color: var(--orphic-wp-block-plugin-color-text);
  opacity: 0.6;
  margin-right: var(--orphic-wp-block-spacing-sm);
  user-select: none;
  
  &:active {
    cursor: grabbing;
  }
}

// Styles pour les boutons de réorganisation
.reorder-buttons {
  display: flex;
  gap: var(--orphic-wp-block-spacing-xs);
  margin-right: var(--orphic-wp-block-spacing-sm);
  
  .components-button {
    padding: var(--orphic-wp-block-spacing-xs);
    min-width: 24px;
    height: 24px;
    
    &:disabled {
      opacity: var(--orphic-wp-block-opacity-disabled);
    }
  }
}

// Styles pour la liste de liens
.link-list {
  min-height: 30px;
  padding: var(--orphic-wp-block-spacing-xs);
  border-radius: var(--orphic-wp-block-border-radius-md);
  transition: all var(--orphic-wp-block-duration-fast) var(--orphic-wp-block-ease-default);
  margin-bottom: var(--orphic-wp-block-spacing-md);
  
  &.drag-over {
    background: var(--orphic-wp-block-plugin-color-info-background);
    border: var(--orphic-wp-block-border-width-medium) dashed var(--orphic-wp-block-plugin-color-primary);
    padding: calc(var(--orphic-wp-block-spacing-xs) - 1px);
  }
}

// Styles communs pour les notices
.components-notice {
  margin: var(--orphic-wp-block-spacing-sm) 0;
}

// Styles communs pour les actions d'édition
.edit-actions {
  display: flex;
  gap: var(--orphic-wp-block-spacing-sm);
  margin-top: var(--orphic-wp-block-spacing-sm);
}

// Styles communs pour les boutons dans différents contextes
.link-item,
.section-item,
.add-link,
.edit-link {
  .edit-actions {
    .components-button {
      height: 24px !important;
      padding: 0 var(--orphic-wp-block-spacing-sm) !important;
      font-size: var(--orphic-wp-block-font-size-xs) !important;
      text-transform: none;
      
      &.is-primary {
        font-size: var(--orphic-wp-block-font-size-xs) !important;
      }
    }
  }
}

// Styles pour l'ajout de liens
.add-link {
  padding: var(--orphic-wp-block-spacing-md);
  background: var(--orphic-wp-block-plugin-color-background);
  border-radius: var(--orphic-wp-block-border-radius-sm);

  .components-button {
    margin-top: var(--orphic-wp-block-spacing-sm);
    width: 100%;
    justify-content: center;
  }

  .components-base-control.block-editor-url-input.block-editor-link-control__field.block-editor-link-control__search-input{
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .components-input-control__container{
    padding: 0;
    margin: 0;
    width: 182px;
  }

  input{
    width: 180px;
  }
}

.components-button.is-secondary.has-icon {
  border: none;
  box-shadow: none;
} 