/**
 * Marked Extended Accordion - Full Theme Styles (SCSS)
 * Visual styles with customizable variables and light/dark support.
 *
 * Import this file after the structural styles:
 * @import '@fsegurai/marked-extended-accordion/styles/accordion.scss';
 * @import '@fsegurai/marked-extended-accordion/styles/accordion-theme.scss';
 */

// Theme Variables - Light Mode
$accordion-border-color-light: #ddd !default;
$accordion-bg-light: #ffffff !default;
$accordion-header-bg-light: #f5f5f5 !default;
$accordion-header-bg-hover-light: #e8e8e8 !default;
$accordion-text-color-light: #333 !default;
$accordion-content-color-light: #24292e !default;

// Theme Variables - Dark Mode
$accordion-border-color-dark: #444c56 !default;
$accordion-bg-dark: #22272e !default;
$accordion-header-bg-dark: #2d333b !default;
$accordion-header-bg-hover-dark: #343b45 !default;
$accordion-text-color-dark: #d1d5da !default;
$accordion-content-color-dark: #d1d5da !default;

// Layout Variables
$accordion-radius: 4px !default;
$accordion-margin: 1rem 0 !default;
$accordion-header-padding: 0.75rem 1rem !default;
$accordion-content-padding: 1rem !default;

:root {
  --marked-extended-accordion-border-color: var(--app-border-light, #{$accordion-border-color-light});
  --marked-extended-accordion-background-color: var(--md-sys-color-surface-container, #{$accordion-bg-light});
  --marked-extended-accordion-header-background-color: var(--md-sys-color-surface-container-high, #{$accordion-header-bg-light});
  --marked-extended-accordion-header-hover-background-color: var(--md-sys-color-surface-container-highest, #{$accordion-header-bg-hover-light});
  --marked-extended-accordion-text-color: var(--app-text-primary, #{$accordion-text-color-light});
  --marked-extended-accordion-content-color: var(--app-text-primary, #{$accordion-content-color-light});
  --marked-extended-accordion-radius: #{$accordion-radius};
  --marked-extended-accordion-margin: #{$accordion-margin};
  --marked-extended-accordion-header-padding: #{$accordion-header-padding};
  --marked-extended-accordion-content-padding: #{$accordion-content-padding};
}

body.light {
  --marked-extended-accordion-border-color: var(--app-border-light, #{$accordion-border-color-light});
  --marked-extended-accordion-background-color: var(--md-sys-color-surface-container, #{$accordion-bg-light});
  --marked-extended-accordion-header-background-color: var(--md-sys-color-surface-container-high, #{$accordion-header-bg-light});
  --marked-extended-accordion-header-hover-background-color: var(--md-sys-color-surface-container-highest, #{$accordion-header-bg-hover-light});
  --marked-extended-accordion-text-color: var(--app-text-primary, #{$accordion-text-color-light});
  --marked-extended-accordion-content-color: var(--app-text-primary, #{$accordion-content-color-light});
}

body.dark {
  --marked-extended-accordion-border-color: #{$accordion-border-color-dark};
  --marked-extended-accordion-background-color: #{$accordion-bg-dark};
  --marked-extended-accordion-header-background-color: #{$accordion-header-bg-dark};
  --marked-extended-accordion-header-hover-background-color: #{$accordion-header-bg-hover-dark};
  --marked-extended-accordion-text-color: #{$accordion-text-color-dark};
  --marked-extended-accordion-content-color: #{$accordion-content-color-dark};
}

.marked-extended-accordion {
  border: 1px solid var(--marked-extended-accordion-border-color);
  border-radius: var(--marked-extended-accordion-radius);
  margin: var(--marked-extended-accordion-margin);
  background-color: var(--marked-extended-accordion-background-color);
}

.marked-extended-accordion-header {
  padding: var(--marked-extended-accordion-header-padding);
  cursor: pointer;
  position: relative;
  background-color: var(--marked-extended-accordion-header-background-color);
  color: var(--marked-extended-accordion-text-color);
  transition: background-color 0.2s ease;

  &:hover {
    background-color: var(--marked-extended-accordion-header-hover-background-color);
  }
}

.marked-extended-accordion-title {
  margin: 0;
  display: inline;
  font-weight: 600;
  color: var(--marked-extended-accordion-text-color);
}

.marked-extended-accordion-content {
  padding: var(--marked-extended-accordion-content-padding);
  color: var(--marked-extended-accordion-content-color);

  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
  }
}