// Organism: faq

$o-faq-bp1: 600;
$o-faq-left-offset: column(0.75);
$o-faq-right-offset: column(0.5);


.o-faq {
  @include contain;
  @include vspacing(
    'margin-top' 1,
    'margin-bottom' 1
  );
}


.o-faq__heading {
  @include font-size(xl);
  margin-bottom: space(3);
  color: palette(tertiary, 400);
}


.o-faq__list {
  list-style: none;
  margin-left: 0;
}


.o-faq__item {
  @include owl(space(2));
}


.o-faq__header {
  margin: 0 column(-1);
  padding: space(2) column(1);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: baseline;
  background: palette(secondary, 100);
  cursor: pointer;
  transition: background-color 150ms linear;

  @include mq($o-faq-bp1) {
    margin: 0;
    padding: space(2) $o-faq-right-offset space(2) $o-faq-left-offset;
  }

  // skewed edges
  @include mq($o-faq-bp1) {
    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      top: 0;
      z-index: 0;
      background: palette(neutral, 0);
      transform: rotate(-70deg);
      transform-origin: bottom left;
    }

    &::after {
      transform-origin: top right;
    }
  }

  &:hover {
    background: scale_color(palette(secondary, 100), $lightness: -6%);
  }
}


.o-faq__title {
  @include font-size(base);
  @include font-weight(regular);
  margin-right: space(2);
}


.o-faq__icon {
  flex: none;
  margin-left: auto;
}


.o-faq__content {
  padding: space(2) 0;

  @include mq($o-faq-bp1) {
    padding: space(2) $o-faq-left-offset;
  }
}


.o-faq__action {
  margin-top: space(5);
}


// Toggled state styling
.o-faq__header.is-toggled {
  background: transparent;
  transition: none;

  &::before,
  &::after {
    display: none;
  }

  .o-faq__title {
    color: palette(tertiary, 400);
  }
  .o-faq__icon {
    color: palette(tertiary, 400);
    transform: rotate(0.5turn);
  }
}