.component-ACCORDION--fullpage
{
  .component-ACCORDION-container
  {
    @include outer-container;
  }
  .component-ACCORDION-wrapper
  {
    @include span-columns(10);
    @include shift(1);
  }
}
.component-ACCORDION-item
{
  margin-bottom: 2px;
}
.component-ACCORDION-item-header
{
  // add style here if needed
}
.component-ACCORDION-item-header-content
{
  background: $color-golden;
  display: flex;
    align-items: center;
    justify-content: space-between;
  padding: 1rem;

  transition: background-color 0.3s ease;
}
.component-ACCORDION-item-header-content[aria-expanded="true"]
{
  background-color: $color-grey-darker;

  .component-ACCORDION-item-header-icon
  {
    &::before
    {
      transform: translateX(-50%) translateY(-50%);
    }
  }
}
.component-ACCORDION-item-header-title
{
  display: block;

  color: #FFFFFF;
  font-family: lucien-bold, Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  line-height: 1;
}
.component-ACCORDION-item-header-icon
{
  display: block;
  height: 1rem;
  width: 1rem;

  position: relative;

  &::before, &::after
  {
    background: #FFFFFF;
    content: '';
    display: block;
    height: 2px;
    width: 100%;

    position: absolute;
      left: 50%;
      top: 50%;
    transition: transform 0.3s ease;
  }
  &::before
  {
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  }
  &::after
  {
    transform: translateX(-50%) translateY(-50%);
  }
}
.component-ACCORDION-item-content[aria-expanded="true"]
{
  border: 1px solid $color-grey-darker;
}
.component-ACCORDION-item-content-wrapper
{
  padding: 1rem;
}

@include tablet-portrait-and-up
{
  .component-ACCORDION-item-header-content
  {
    padding: 1rem 2rem;
  }
  .component-ACCORDION-item-header-icon
  {
    height: 1.2rem;
    width: 1.2rem;

    &::before, &::after
    {
      height: 4px;
    }
  }
  .component-ACCORDION-item-content-wrapper
  {
    padding: 1rem 2rem;
  }
}