/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
 * Container for a expandable section
 */
.slds-section {
  margin-block: var(--slds-g-spacing-2);

  /**
   * Toggle visibility of section content
   */
  &.slds-is-open .slds-section__title-action-icon {
    transform: rotate(0deg);
    transform-origin: 45%;
  }

  &.slds-is-open .slds-section__content {
    padding-top: var(--slds-g-spacing-2);
    overflow: visible;
    visibility: visible;
    opacity: 1;
    height: auto;
    color: var(--slds-g-color-on-surface-1);
  }
}

/**
  * Element containing the title of a section
  */
.slds-section__title {
  display: flex;
  align-items: center;
  font-size: var(--slds-s-container-heading-var-font-size, var(--slds-g-font-scale-2));
  /* Same height as title-action */
  line-height: 1.875rem;
  border: var(--slds-g-sizing-border-1) solid transparent;
  border-radius: var(--slds-g-radius-border-2);

  /* Set border-radius for expandable-section */
  .slds-button {
    --slds-c-button-radius-border: var(--slds-g-radius-border-2);
  }
}

/**
  * Element containing the action inside of an expandable section title
  */
.slds-section__title-action {
  display: flex;
  align-items: center;
  background-color: var(--slds-g-color-surface-container-2);
  cursor: pointer;
  width: 100%;
  text-align: start;
  color: var(--slds-g-color-on-surface-3);
  font-size: inherit;
  font-weight: var(--slds-s-container-heading-font-weight);
  padding: 0 var(--slds-g-spacing-2);

  &:hover,
  &:focus,
  &:active {
    background-color: var(--slds-g-color-surface-container-2);
    color: inherit;
  }
}

/**
  * Element containing the content of an expandable section
  */
.slds-section__content {
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  height: 0;
}

/**
  * The icon element adjacent to the title
  */
.slds-section__title-action-icon {
  transform: rotate(-90deg);
}

/**
  * Section title divider
  */
.slds-section-title_divider {
  font-size: var(--slds-g-font-scale-neg-1);
  line-height: var(--slds-g-font-lineheight-2);
  color: var(--slds-g-color-neutral-base-30);
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  padding: var(--slds-g-spacing-2) var(--slds-g-spacing-4);
  background-color: var(--slds-g-color-surface-container-2);
}