// Share styles
@import "../../sass/base.scss";

.is-accordion {
  --cbb-abf: 1px solid rgba(0,0,0,.125);
  &-item {
    border-top: var(--cbb--border-top, var(--cbb-abf));
    border-right: var(--cbb--border-right, var(--cbb-abf));
    border-bottom: var(--cbb--border-bottom, var(--cbb-abf));
    border-left: var(--cbb--border-left, var(--cbb-abf));
  }

  &.has-no-gap {
    .is-accordion-item:not(:first-of-type) {
      border-top: 0;
    }
  }

  .accordion {
    &-link,
    &-body {
      padding: var(--bb--accordion-padding-y--sm, 1rem) var(--bb--accordion-padding-x--sm, 1.25rem);

      @media (min-width: map-get($breakpoints, md )) {
        padding: var(--bb--accordion-padding-y--md, 1rem) var(--bb--accordion-padding-x--md, 1.25rem);
      }

      @media (min-width: map-get($breakpoints, lg )) {
        padding: var(--bb--accordion-padding-y--lg, 1rem) var(--bb--accordion-padding-x--lg, 1.25rem);
      }
    }
  }

  &[style*="--bb--accordion-gap--sm:"] {
    display: flex;
    flex-direction: column;
    gap: var(--bb--accordion-gap--sm);
  }

  @media (min-width: map-get($breakpoints, md )) {
    &[style*="--bb--accordion-gap--md:"] {
      display: flex;
      flex-direction: column;
      gap: var(--bb--accordion-gap--md);
    }
  }

  @media (min-width: map-get($breakpoints, lg )) {
    &[style*="--bb--accordion-gap--lg:"] {
      display: flex;
      flex-direction: column;
      gap: var(--bb--accordion-gap--lg);
    }
  }
}