:host {
  display: block;
}

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

  &__is-open {
    $border-color: var(--grayscale-dark);
    @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 {
  justify-content: flex-start;
  letter-spacing: -0.69px;
  line-height: 28px;
  margin: 0 auto;
  transition: all .25s ease-in-out;
  width: 100%;

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

    align-items: center;
    border: none;
    color: var(--brand-main-nearly-black);
    display: flex;
    flex-direction: row;
    font-family: var(--main-font-family);
    font-size: 22px;
    font-weight: 600;
    height: 100%;
    justify-content: flex-start;
    padding: .75rem 1.75rem .75rem 1.25rem;
    transition: all .35s ease-in;
    width: 100%;

    &:hover {
      cursor: pointer;
    }

    @include breakpoint($medium) {
      font-size: 26px;
      letter-spacing: -0.82px;
      line-height: 32px;
    }

    &[aria-expanded=true] {
      background: none;
      border-bottom: 1px solid var(--grayscale-medium-dark);
      border-left: 0;
      border-right: 0;
      border-top: 0;
      padding: .85rem 1rem 1rem 1rem;
      transition: all .35s ease-in;
    }
  }

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

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

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

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