// Collapsible Content variables
// SCSS variables for internal component use and customization
// these variables can be customized by the user

// layout
$component-display: block !default;
$button-width: 100% !default;
$button-text-align: left !default;

// appearance
$button-background: none !default;
$button-border: none !default;
$button-cursor: pointer !default;

// animation
$content-padding: 0px !default;
$content-display: block !default;
$content-overflow: hidden !default;
$transition-duration: 0.35s !default;
$transition-timing: ease-out !default;

// Define CSS Custom Properties using SCSS values
:root {
  // layout
  --cc-component-display: #{$component-display};
  --cc-button-width: #{$button-width};
  --cc-button-text-align: #{$button-text-align};
  
  // appearance
  --cc-button-background: #{$button-background};
  --cc-button-border: #{$button-border};
  --cc-button-cursor: #{$button-cursor};
  
  // animation
  --cc-content-padding: #{$content-padding};
  --cc-content-display: #{$content-display};
  --cc-content-overflow: #{$content-overflow};
  --cc-transition-duration: #{$transition-duration};
  --cc-transition-timing: #{$transition-timing};
}