/*
            * Main SCSS file for including styles for component.
            * 
            * Imports:
            * - Styling variables (_var__component_name.scss)
            * - Base styles (_css__component_name.scss)
            * 
            */
/*
            * _var__component_name.scss
            * 
            * SCSS file containing variables for component styling.
            * 
            * Used to define default parameters (color, size, etc.)
            * that can be overridden in other parts of the project.
            * 
            * Example usage:
            * --sf-icon--fill: 0; // Fill for icon
            */
.sf-accordion {
  width: 100%; }

.sf-accordion-item {
  margin-bottom: 5px;
  border-radius: var(--sf-radius-1);
  overflow: hidden; }

.sf-accordion-item--title {
  background-color: var(--sf-surface-container);
  cursor: pointer;
  font-weight: var(--sf-text--font-weight-7);
  display: flex;
  justify-content: space-between;
  padding: var(--sf-space-3) var(--sf-space-3) var(--sf-space-3); }
  .sf-accordion-item--title:hover {
    background-color: var(--sf-surface-container-hover); }
  .sf-accordion-item--title .sf-icon {
    font-size: var(--sf-text--size-3); }

.sf-accordion-item--title.active {
  background-color: var(--sf-surface-container-active);
  padding: var(--sf-space-3) var(--sf-space-3) 0; }

.sf-accordion-item--content {
  padding: 10px;
  display: none;
  background-color: var(--sf-surface-container-active);
  color: var(--sf-on-surface-variant);
  padding: var(--sf-space-1\/3) var(--sf-space-3) var(--sf-space-3); }

.sf-accordion-item--content.open {
  display: block; }