// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@import 'deprecate';

/**
 * @summary Container for a expandable section
 *
 * @name base
 * @selector .slds-section
 * @restrict article, div
 * @support dev-ready
 * @variant
 */
.slds-section {
  margin: {
    top: $spacing-x-small;
    bottom: $spacing-x-small;
  }

  /**
   * @summary Toggle visibility of section content
   *
   * @selector .slds-is-open
   * @restrict .slds-section
   * @modifier
   * @group visibility
   */
  &.slds-is-open {

    .slds-section__title-action-icon {
      transform: rotate(0deg);
      transform-origin: 45%;
    }

    .slds-section__content {
      padding-top: $spacing-x-small;
      overflow: visible;
      visibility: visible;
      opacity: 1;
      height: auto;
    }
  }
}

/**
  * @summary Element containing the title of a section
  *
  * @selector .slds-section__title
  * @restrict .slds-section h3
  */
.slds-section__title {
  display: flex;
  align-items: center;
  font-size: $var-font-size-5;
  line-height: $line-height-button; // Same height as title-action
  border: $border-width-thin solid transparent;
  border-radius: $border-radius-medium;
}

/**
  * @summary Element containing the action inside of an expandable section title
  *
  * @selector .slds-section__title-action
  * @restrict .slds-section__title button
  */
.slds-section__title-action {
  display: flex;
  align-items: center;
  background: var(--slds-g-color-neutral-base-95, #{$color-background});
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: currentColor;
  font-size: inherit;
  padding: 0 $spacing-x-small;

  &:hover,
  &:focus,
  &:active {
    background: var(--slds-g-color-neutral-base-95, #{$color-background-button-default-active});
    color: inherit;
  }
}

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

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

/**
  * @summary Section title divider
  *
  * @selector .slds-section-title_divider
  * @restrict .slds-section h3
  */
.slds-section-title_divider,
.slds-section-title--divider {
  @include text-heading--label;
  padding: $spacing-x-small $spacing-medium;
  background: var(--slds-g-color-neutral-base-95, #{$color-background});
}