// Hydrogen / Components / Accordion

@mixin h2-component-accordion-reset(
  $font-scale-default
) {
  font-size: $font-scale-default
}

@mixin h2-component-accordion-generic(
  $focus-color
) {

  // Trigger
  >[data-h2-accordion-trigger] {
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    position: relative;
    text-align: left;
    width: 100%;

    // Accessibility Label
    [data-h2-accordion-trigger-label] {
      height: 1px;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: -100vw;
      width: 1px;
    }

    // Trigger Icons
    [data-h2-accordion-add-icon] {
      display: block;
      position: absolute;
      top: 50%;
      text-align: center;
      transform: translate(-50%, -50%);
      width: 1rem;
    }
    [data-h2-accordion-remove-icon] {
      display: none;
      position: absolute;
      top: 50%;
      text-align: center;
      transform: translate(-50%, -50%);
      width: 1rem;
    }

  }

  // Content
  >[data-h2-accordion-content] {
    display: none;
  }

  // Active/Open State
  &.h2-active {

    // Trigger
    >[data-h2-accordion-trigger] {

      // Trigger Icons
      [data-h2-accordion-add-icon] {
        display: none;
      }
      [data-h2-accordion-remove-icon] {
        display: block;
      }

    }

    // Content
    >[data-h2-accordion-content] {
      display: block;
    }

  }

  // Focused State
  >[data-h2-accordion-trigger]:focus {
    box-shadow: -1px -1px 0 $focus-color, 0 -1px 0 $focus-color, 1px -1px 0 $focus-color, 1px 0 0 $focus-color, 1px 1px 0 $focus-color, 0 1px 0 $focus-color, -1px 1px 0 $focus-color, -1px 0 0 $focus-color;
    outline: none;
  }

}

@mixin h2-component-accordion-right {

  // Trigger
  >[data-h2-accordion-trigger] {
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 5rem;

    // Trigger Icons
    [data-h2-accordion-add-icon] {
      right: 2.5rem;
    }
    [data-h2-accordion-remove-icon] {
      right: 2.5rem;
    }

  }

}

@mixin h2-component-accordion-left {

  // Trigger
  >[data-h2-accordion-trigger] {
    padding-top: 0;
    padding-left: 5rem;
    padding-bottom: 0;
    padding-right: 0;

    // Trigger Icons
    [data-h2-accordion-add-icon] {
      left: 2.5rem;
    }
    [data-h2-accordion-remove-icon] {
      left: 2.5rem;
    }

  }

  // Content
  >[data-h2-accordion-content] {
    padding-left: 5rem;
  }

}