accordion-item.scss

:host {
  display: block;
}

.hy-accordion__item {
  $border-color: var(--grayscale-dark);
  @include border-without-corners($border-color, 1px);

  margin-bottom: 1rem;
  transition: all .25s ease-in-out;

  &__is-open {
    @include border-without-corners($border-color, 2px);
    margin-left: -1rem;
    margin-right: -1rem;
    transition: all .25s ease-in-out;

    @include breakpoint($medium) {
      margin-left: -2rem;
      margin-right: -2rem;
    }

    .hy-accordion--heading {
      margin: 0 auto;
      width: calc(100% - 2.25rem);
      transition: all .25s ease-in-out;

      @include breakpoint($medium) {
        width: calc(100% - 4.25rem);
      }

      .hy-accordion--heading__icon {
        transform: rotateX(180deg);
      }
    } 
  }
}

.hy-accordion--heading {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto;
  transition: all .25s ease-in-out;

  .hy-accordion__button {
    align-items: center;
    border: none;
    display: flex;
    font-weight: 600;
    height: 100%;
    justify-content: flex-start;
    padding: .75rem 1.75rem .75rem 1.25rem;
    width: 100%;

    &[aria-expanded=true] {
      border-bottom: 1px solid var(--grayscale-medium-dark);
      padding: .85rem 1rem 1rem 1rem;
    }
  }

  .hy-accordion--heading__icon {
    margin-right: .95rem;

    svg {
      fill: var(--brand-main);
    }
  }
}

.hy-accordion__content {
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  transition: all .25s ease-in-out;

  &--inner-wrapper {
    display: block;
    padding: 1rem 5% 1.25rem !important;
  }
}