.eds-c-accordion {
  width: 100%;
}

.eds-c-accordion__button-container {
  display: flex;
  flex-direction: row-reverse; // needed for .eds-c-accordion__strip adjacent .eds-c-accordion__button.is-open css rule
  justify-content: space-between;
}

.eds-c-accordion__button {
  @include u-button-reset;
  width: 100%;
  flex-grow: 1;
  padding: $t-eds-c-accordion--button-padding;
  border-top: 1px solid $t-eds-c-accordion--primary-color;
  border-bottom: 1px solid $t-eds-c-accordion--primary-color;
}

@include from-tablet {
  .eds-c-accordion__button {
    border-left: 1px solid $t-eds-c-accordion--primary-color;
    border-right: 1px solid $t-eds-c-accordion--primary-color;
  }
}

.eds-c-accordion + .eds-c-accordion .eds-c-accordion__button,
li + li > .eds-c-accordion .eds-c-accordion__button {
  border-top: none;
}

.eds-c-accordion__button.is-open {
  border-left: none;
}

.eds-c-accordion__button.is-open + .eds-c-accordion__strip {
  flex-grow: 0;
  width: $t-eds-c-accordion--strip-width;
  background-color: $t-eds-c-accordion--secondary-color;
}

.eds-c-accordion__icon {
  width: 1em;
  height: 1em;
  color: $t-eds-c-accordion--tertiary-color;
  fill: $t-eds-c-accordion--tertiary-color;
}

.eds-c-accordion__button.is-open .eds-c-accordion__icon {
  color: $t-eds-c-accordion--secondary-color;
  fill: $t-eds-c-accordion--secondary-color;
  transform: rotate(180deg);
}

.eds-c-accordion__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: $t-eds-c-accordion--header-gap;
}

.eds-c-accordion__title {
  display: inline-block;
  color: $t-eds-c-accordion--quaternary-color;
  font-family: $t-a-typography-font-family-default;
  font-size: $t-eds-c-accordion--font-size;
  font-weight: $t-a-typography-font-weight-bold;
  line-height: $t-a-typography-line-height-md;
}

.eds-c-accordion__button.is-open .eds-c-accordion__title {
  color: $t-eds-c-accordion--secondary-color;
}

.eds-c-accordion__content {
  background-color: $t-eds-c-accordion--background-color;
  padding: $t-eds-c-accordion--content-padding;
  border-bottom: 1px solid $t-eds-c-accordion--primary-color;
}

// This block of styling provides some basic support for content that might be implemented inside the Accordion component
.eds-c-accordion__content ul {
  @include u-list-reset;
  font-size: $t-eds-c-accordion--font-size;

  h1, h2, h3, h4, h5, h6 {
    font-size: $t-eds-c-accordion--heading-font-size;
    margin: $t-eds-c-accordion--heading-margin;
  }

  li + li {
    margin-top: $t-eds-c-accordion--list-item-spacing;
  }

  a {
    color: $t-eds-c-accordion--tertiary-color;
    line-height: $t-a-typography-line-height-md;
  }
}

.eds-c-accordion__content.eds-c-accordion__content--grouped > ul > li + li {
  margin-top: $t-eds-c-accordion--content-grouped-spacing;
}
