@mixin accordion-styles() {
  position: relative;

  .accordion__toggle {
    cursor: pointer;
  }

  .accordion__segment.is-collapsed {
    .accordion__content {
      display: none;

      + * {
        margin-top: 0;
      }
    }
  }

  //*--tr = top-right
  .accordion__icon--tr {
    position: absolute;
    top: 0;
    right: 0;
  }

  //*--br = bottom-right
  .accordion__icon--br {
    position: absolute;
    bottom: 1em;
    right: 1em;
  }
}

.accordion {
  @include accordion-styles();
}

.accordion--chrome {
  border: 1px solid $colour-grey-lightmid;
}

.accordion__segment + .accordion__segment--chrome {
  border-top: 1px solid $colour-grey-light;
}

.accordion__toggle--chrome,
.accordion__content--chrome {
  padding: ($accordion-chrome-padding * 0.6) $accordion-chrome-padding;
  padding-right: (($accordion-chrome-padding * 2) + $accordion-chrome-icon-size);
}

.accordion__content--chrome {
  padding-top: 0;
}

.accordion__toggle--chrome {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    display: block;
    right: $accordion-chrome-padding;
    top: 50%;
    margin-top: -($accordion-chrome-icon-size / 2);
  }
}

.accordion--highlight {
  border-color: $colour-blue;
}

.accordion__segment + .accordion__segment--highlight {
  border-color: $colour-blue-lightmid;
}

// accordion only up to medium bp
@media (min-width: $breakpoint-medium) {
  .accordion--max-medium {
    .in-accordion-only {
      //this element should only exist when the accordion is in effect
      display: none;
    }
  }
}

@media (max-width: ($breakpoint-medium - 0.001em)) {
  // -0.001em prevents overlap blind spot between min and max values
  .accordion--max-medium {
    @include accordion-styles();
  }
}

//accordion only up to large bp
@media (min-width: $breakpoint-large) {
  .accordion--max-large {
    .in-accordion-only {
      display: none;
    }
  }
}

@media (max-width: ($breakpoint-large - 0.001em)) {
  .accordion--max-large {
    @include accordion-styles();
  }
}