/**
 * HTML Editor Main Styles
 *
 * Following project conventions with Cap UI variables and patterns
 */

// Import Cap UI variables (correct path)
@import "~@capillarytech/cap-ui-library/styles/_variables.scss";

// Fullscreen modal header styling - using proper CSS specificity instead of !important
.html-editor-fullscreen {
  // INAPP variant only: Fullscreen header styling
  &--inapp {
    .html-editor__header--fullscreen {
      display: flex;
      align-items: center;
      background-color: $CAP_G10;
      border-bottom: 0.0625rem solid $CAP_G08;
      padding-right: 1rem;

      // Device toggle takes available space
      .device-toggle {
        flex: 1;
      }

      // Toolbar styling in fullscreen mode - INAPP variant only
      .editor-toolbar {
        background-color: transparent;
        border-bottom: none;
        padding: 0;
        min-height: 3.25rem;
        height: 3.25rem;
        position: relative;

        // Right-align toolbar actions
        &__right {
          margin-left: auto;
        }
      }
    }

    // Library mode: Position absolute for toolbar in fullscreen (INAPP variant only)
    // Using higher specificity to override _fullscreenModal.scss styles
    &.html-editor-fullscreen--library-mode {
      .html-editor__header--fullscreen {
        .editor-toolbar,
        .editor-toolbar.editor-toolbar,
        .ant-layout-header.editor-toolbar {
          position: absolute;
        }
      }
    }
  }
}

// Additional library mode overrides for fullscreen with maximum specificity
// These match the high-specificity selectors in _fullscreenModal.scss
.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar {
  position: absolute;
}

.html-editor {
  height: 37.5rem !important; // Fixed height instead of 100vh (600px = 37.5rem)
  max-height: 80vh; // Responsive maximum height
  display: flex;
  flex-direction: column;
  background-color: $CAP_WHITE;
  font-family: $FONT_FAMILY;
  border: 0.0625rem solid $CAP_G07;
  border-radius: 0.25rem;
  overflow: hidden;

  // Library mode: Apply specific styles when isFullMode is false
  &.html-editor--library-mode {
    .preview-pane {
      max-height: calc(95vh - 5%);

      &__content {
        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
        max-height: calc(95vh - 30%);
      }

      iframe {
        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
        max-height: calc(95vh - 30%);
      }
    }
  }

  &.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background-color: $CAP_WHITE;
    border: none;
    border-radius: 0;
    // Override base height constraints to fill viewport
    height: 100vh;
    max-height: none;
    min-height: unset;
  }

  // Loading state
  &-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25rem; // 400px = 25rem
    background-color: $CAP_G09;
    border-radius: 0.25rem;
  }

  // Main content area - seamless with toolbar
  &-content {
    flex: 1;
    overflow: hidden;
    background-color: $CAP_WHITE;
    display: flex;
  }

  // Split container - integrated design
  &-split-container {
    flex: 1;
    display: flex;
    background-color: $CAP_WHITE;
    overflow: hidden;
    border: none; // Remove borders for seamless look
  }

  // InApp variant specific styling
  &--inapp {

    // InApp variant has different header structure
    .html-editor__header {
      display: flex;
      align-items: center;
      background-color: $CAP_G10;
      border-bottom: 0.0625rem solid $CAP_G08;
      padding-right: 1rem;

      // Device toggle takes available space
      .device-toggle {
        flex: 1;
      }

      // Toolbar styling in InApp variant
      .editor-toolbar {
        background-color: transparent;
        border-bottom: none;
        padding: 0;
        min-height: 3.25rem; // 52px = 3.25rem
        height: 3.25rem;
        position: relative;

        // Right-align toolbar actions
        &__right {
          margin-left: auto;
        }
      }
    }

    // Library mode: Position absolute for toolbar in InApp variant
    // Using higher specificity to override default position: relative
    &.html-editor--library-mode {
      .html-editor__header {
        .editor-toolbar,
        .editor-toolbar.editor-toolbar,
        .ant-layout-header.editor-toolbar {
          position: absolute;
        }
      }
    }
  }

  // Responsive design
  @media (max-width: 768px) {
    height: 31.25rem; // 500px = 31.25rem - Smaller height on tablets
    max-height: 70vh;

    &-split-container {
      flex-direction: column;
    }

    // InApp variant responsive adjustments
    &--inapp {
      .html-editor__header {
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem 1rem; // 12px 16px = 0.75rem 1rem

        .device-toggle {
          margin-bottom: 0.75rem; // 12px = 0.75rem
        }

        .editor-toolbar {
          &__right {
            margin-left: 0;
            justify-content: flex-end;
          }
        }
      }
    }
  }

  @media (max-width: 576px) {
    height: 25rem; // 400px = 25rem - Even smaller height on mobile
    max-height: 60vh;

    &-content {
      padding: 0;
    }

    &-split-container {
      border-radius: 0;
    }
  }

  // Fullscreen modal styles
  &-fullscreen {
    height: 42.857rem;
    display: flex;
    flex-direction: column;
    background-color: $CAP_WHITE;

    .html-editor-content-fullscreen {
      flex: 1;
      overflow: hidden;
      background-color: $CAP_WHITE;
      display: flex;
      flex-direction: column;
    }

    .html-editor-split-container-fullscreen {
      flex: 1;
      display: flex;
      background-color: $CAP_WHITE;
      overflow: hidden;
      border: none;
    }

    // Remove any default modal padding/margins
    .editor-toolbar {
      border-bottom: 0.0625rem solid $CAP_G07; // Add separator line in fullscreen
      margin: 0;
      padding-left: 1.5rem; // 24px = 1.5rem
      padding-right: 1.5rem;
    }

    .editor-toolbar {
      border-radius: 0; // Remove border radius in modal
    }

    .code-editor-pane {
      .codemirror-wrapper {
        height: 100%;
        max-height: calc(95vh - 5%); // 95% of viewport height with 5% gap
      }

      &__content {
        max-height: calc(95vh - 5%); // 95% of viewport height with 5% gap
      }
    }

    .preview-pane {
      max-height: calc(95vh - 5%); // Same as editor pane - 95% of viewport height with 5% gap

      &__content {
        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
        max-height: calc(95vh - 30%);
      }

      iframe {
        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
        max-height: calc(95vh - 30%);
      }
    }
  }
}

// Fullscreen modal library mode styles (outside .html-editor block since fullscreen is a separate element)
.html-editor-fullscreen--library-mode {
  .preview-pane {
    max-height: calc(95vh - 5%);

    &__content {
      height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
      max-height: calc(95vh - 30%);
    }

    iframe {
      height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
      max-height: calc(95vh - 30%);
    }
  }
}

// Animation classes for smooth transitions
.html-editor-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.html-editor-fade-enter {
  opacity: 0;
}

.html-editor-fade-enter-active {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

.html-editor-fade-exit {
  opacity: 1;
}

.html-editor-fade-exit-active {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

// Focus states and accessibility
.html-editor {

  // High contrast mode support
  @media (prefers-contrast: high) {
    border: 0.125rem solid $CAP_G01; // 2px = 0.125rem, #262626 ≈ $CAP_G01

    &-split-container {
      border: 0.0625rem solid $CAP_G06; // 1px = 0.0625rem, #d9d9d9 ≈ $CAP_G06
    }
  }

  // Reduced motion support - !important is appropriate here for accessibility
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important; // Override all animations for accessibility
      animation-iteration-count: 1 !important; // Prevent looping animations
      transition-duration: 0.01ms !important; // Minimize transition time
    }
  }
}

// Print styles
@media print {
  .html-editor {
    height: auto;

    &-split-container {
      flex-direction: column;
      box-shadow: none;
    }
  }
}