/**
 * Sphinx togglebutton
 */

.bd-content {
  @mixin chevron-down {
    .toggle-chevron-right {
      transform: rotate(90deg); // point chevron down
      transition: none; // match non-animated behavior of other chevrons on site
    }
  }

  @mixin chevron-up {
    .toggle-chevron-right {
      transform: rotate(-90deg); // point chevron up
      transition: none; // match non-animated behavior of other chevrons on site
    }
  }

  // Admonition toggles
  .admonition {
    button.toggle-button {
      color: inherit;

      // When disclosure widget is closed
      &.toggle-button-hidden {
        @include chevron-down;
      }

      // When open
      @include chevron-up;
    }

    // Focus ring
    // ----------
    // Sphinx-togglebutton makes the entire admonition header clickable, but
    // only the button within the header is focusable. We want the entire
    // clickable area to be surrounded with a focus ring, so that's why we use
    // the :focus-within selector, rather than a :focus-visible selector on the
    // button.
    &:focus-within {
      overflow: visible;

      // The complicated focus ring styles here are a consequence of the markup
      // and border styles for this particular admonition class. (For the other
      // type of admonition on this site, the focus ring style is achieved with
      // simple `outline` and `outline-offset` rules on the admonition's
      // header.) The problem is that Sphinx-togglebutton puts the admonition's
      // left border on the outermost container (rather than separately setting
      // the left border on the container's children). This makes it complicated
      // to get the focus ring to simultaneously cover the left border in the
      // header and align perfectly on the right with the body.
      .admonition-title:focus-within::before {
        content: "";
        transform: translateX(
          -$admonition-left-border-width
        ); // align left edges of admonition and ring

        width: calc(100% + $admonition-left-border-width); // align right edges
        height: 100%;
        border: $focus-ring-outline;
        border-radius: $focus-ring-width;
      }

      // When expanded, sharpen the bottom left and right corners of the focus ring
      &:not(.toggle-hidden) .admonition-title:focus-within::before {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  // Details buttons
  details.toggle-details {
    // Over-ride border color to re-use our primary color
    summary {
      border-left: 3px solid var(--pst-color-primary);

      @include chevron-down;
    }

    // When expanded, sharpen the bottom left and right corners of the focus ring
    &[open] {
      @include chevron-up;

      :focus-visible {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
}
