/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiAccordion__triggerWrapper {
  display: flex;
  align-items: center;
}

.ouiAccordion__button {
  @include ouiFontSize;
  text-align: left;
  width: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;

  &:hover,
  &:focus {
    text-decoration: underline;
    cursor: pointer;
  }

  &:focus {
    .ouiAccordion__iconWrapper {
      @include ouiAccordionIconFocus;
      outline: none; // The `outline` gets applied to the whole button, we don't need a second one on the icon
    }
  }
}

.ouiAccordion__buttonReverse {
  // Puts the arrow on the right
  flex-direction: row-reverse;
  justify-content: space-between;

  .ouiAccordion__iconWrapper {
    @include ouiAccordionIconMargin(right);
  }
}

.ouiAccordion__iconWrapper {
  @include size($ouiSize);
  @include ouiAccordionIconMargin;
  border-radius: $ouiBorderRadius;
  flex-shrink: 0;

  // Nested to override OuiIcon
  .ouiAccordion__icon {
    vertical-align: top;
    transition: transform $ouiAnimSpeedNormal $ouiAnimSlightResistance;
  }

  .ouiAccordion__icon-isOpen {
    transform: rotate(90deg);
  }
}

.ouiAccordion__iconButton {
  @include ouiAccordionIconMargin(right);

  &:focus {
    @include ouiAccordionIconFocus;
  }
}

.ouiAccordion__optionalAction {
  flex-shrink: 0;
}

.ouiAccordion__childWrapper {
  visibility: hidden;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translatez(0);
  // sass-lint:disable-block indentation
  transition:
    height $ouiAnimSpeedNormal $ouiAnimSlightResistance,
    opacity $ouiAnimSpeedNormal $ouiAnimSlightResistance;

  &:focus {
    outline: none; // Hide focus ring because of `tabindex=-1` on Safari
  }
}

$paddingSizes: (
  xs: $ouiSizeXS,
  s: $ouiSizeS,
  m: $ouiSize,
  l: $ouiSizeL,
  xl: $ouiSizeXL,
);

// Create button modifiers based upon the map.
@each $name, $size in $paddingSizes {
  .ouiAccordion__padding--#{$name} {
    padding: $size;
  }
}

.ouiAccordion.ouiAccordion-isOpen {
  .ouiAccordion__childWrapper {
    visibility: visible;
    opacity: 1;
    height: auto;
  }
}

.ouiAccordion__children-isLoading {
  line-height: $ouiLineHeight;
  display: flex;
  align-items: center;

  .ouiAccordion__spinner {
    margin-right: $ouiSizeXS;
  }
}