:host {
  display: block;
}

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

  margin-bottom: 1rem;

  &__is-open {
    @include border-without-corners($border-color, 2px);
    margin-left: -2rem;
    margin-right: -2rem;
  }
}

.hy-accordion--heading {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;

  .hy-accordion__button {
    border: none;
    font-weight: 600;
    height: 100%;
    padding: .75rem 1.75rem .75rem 1.25rem;
    justify-content: flex-start;
    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 {
  height: auto;
  padding: 1rem 5% 1.25rem;
  
  &[hidden] {
    height: 0;
    overflow: hidden;
    padding: 0;
  }
}