@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.functions";
@import "mixins/components.button";

.c-accordion__list {
  padding: 0;
  margin: 0;
  list-style-type: none;
  flex-direction: column;
}
.c-accordion__item {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.c-accordion__item-container,
.c-accordion__list .c-accordion__list {
  flex: 1 1 100%;
}
.c-accordion__item-container {
  min-height: rem(45); // 44 + 1px border
  border-bottom: 1px solid $color-grey-800;
  display: flex;
  align-items: stretch;
}
.c-accordion__item-link {
  min-width: 0;
  padding: rem(8) 0;
  flex: 1;
  display: flex;
  align-items: center;
}
.c-accordion__item-link,
.c-accordion--full-width-buttons .c-button {
  @include font-gm-sans-bold;
  font-size: rem(12);
  letter-spacing: rem(1);
  line-height: 1.2;
  color: $color-white;
  text-transform: uppercase;
  text-decoration: none;
  &:hover,
  &:focus {
    text-decoration: underline;
  }
}
.c-accordion__item--open > .c-accordion__item-container {
  .c-button__icon {
    transform: rotate(-180deg);
  }
}

// Standard buttons

.c-accordion--standard-buttons {
  // Top-level
  .c-accordion__item-container {
    background-color: $color-grey-700;
  }
  .c-accordion__item-link {
    padding-left: rem(10);
    padding-right: rem(10);
  }
  .c-accordion__item-link--beside-button {
    margin-right: rem(20);
    padding-right: 0;
  }
  .c-button {
    @include c-button-theme($color-grey-600);
  }
  // Level 1
  .c-accordion__list--level-1 {
    .c-accordion__item-container {
      background-color: $color-grey-300;
    }
    .c-accordion__item-link {
      color: $color-grey-900;
      padding-left: rem(20);
    }
    .c-button {
      @include c-button-theme($color-grey-200, $text: $color-grey-700);
    }
  }
  // Level 2
  .c-accordion__list--level-2 {
    .c-accordion__item-container {
      background-color: $color-grey-200;
    }
    .c-accordion__item-link {
      padding-left: rem(30);
    }
    .c-button {
      @include c-button-theme($color-grey-100);
    }
  }
  // Level 3
  .c-accordion__list--level-3 {
    .c-accordion__item-container {
      background-color: $color-grey-100;
    }
    .c-accordion__item-link {
      padding-left: rem(40);
    }
    .c-button {
      @include c-button-theme("white-primary");
    }
  }
}

// Full-width buttons

.c-accordion--full-width-buttons {
  // Top-level
  .c-accordion__item-container {
    border-bottom-color: $color-grey-500;
  }

  .c-button,
  .c-accordion__item-link {
    @include c-button-theme($color-grey-700);
    padding-left: rem(10);
    padding-right: rem(10);

    &:hover,
    &:focus,
    &:active {
      color: $color-grey-200;
      .c-button__icon {
        fill: $color-grey-200;
      }
    }
  }

  .c-button {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: none;
    .c-button__icon {
      margin-left: auto;
      margin-right: 0;
      order: 2;
    }
  }
  .c-accordion__item-link {
    @include font-gm-sans;
    text-transform: none;
    font-size: rem(14);
  }
  // Level 1
  .c-accordion__list--level-1 {
    .c-accordion__item-container {
      border-bottom: none;
    }
    .c-button,
    .c-accordion__item-link {
      @include c-button-theme($color-grey-600);
      padding-left: rem(20);

      &:hover,
      &:focus,
      &:active {
        color: $color-grey-200;
        .c-button__icon {
          fill: $color-grey-200;
        }
      }
    }
  }
  // TODO: Design this component to look good with more than
  // one sub-level and with items that don't contain sub-lists
}

// Light and Light Stone version of full width button
// Note: not currently used on its own so not added as a specimen on the Accordion page.
.c-accordion--light,
.c-accordion--full-width-buttons--light-stone {
  // Top-level
  .c-accordion__item-container {
    border-bottom-color: $color-stone-300;
    background-color: $color-stone-100;
  }

  // Top border, above the first parent item of the accordion.
  .c-accordion__list--level-0 {
    > .c-accordion__item:first-of-type {
      > .c-accordion__item-container {
        border-top: 1px solid $color-stone-300;
      }
    }
  }

  .c-button,
  .c-accordion__item-link {
    @include c-button-theme($color-stone-100, $color-grey-900);
  }

  // Level 1
  .c-accordion__list--level-1 {
    .c-button,
    .c-accordion__item-link {
      @include c-button-theme($color-stone-100, $color-grey-900);
    }
  }

  .c-accordion__item--open {
    .c-accordion__list--level-1 {
      border-bottom: 1px solid $color-stone-300;
    }

    .c-accordion__item-container {
      border-bottom: none;
    }
  }

  .c-accordion__item-unlinked-content {
    color: $color-grey-900;
  }
}

// Info format of the accordion with specific spacing, and fonts.

.c-accordion--full-width-buttons--info {
  .c-accordion__item-unlinked-content {
    @include font-pratt;
    font-size: rem(16);
    line-height: line-height(16, 22);
    padding-right: rem(30);
    padding-left: rem(10);
  }
}

// Light version of full width button
.c-accordion--light {
  .c-accordion__item-container {
    border-bottom-color: $color-stone-300;
    background-color: $color-white;
  }

  .c-button,
  .c-accordion__item-link {
    @include c-button-theme($color-white, $color-grey-900);
  }

  // Level 1
  .c-accordion__list--level-1 {
    .c-button,
    .c-accordion__item-link {
      @include c-button-theme($color-white, $color-grey-900);
    }
  }

  .c-accordion__item-unlinked-content {
    @include font-pratt;
    font-size: rem(16);
    line-height: line-height(16, 22);
    padding: rem(10) rem(30) rem(10) rem(10);
    color: $color-grey-900;
  }
}

// "Skeleton" preload animation

.c-accordion__placeholder {
  position: relative;
}
.c-accordion--skeleton {
  &.c-accordion--full-width-buttons  {
    background-color: $color-grey-700;
  }
  .c-accordion__item-container {
    background-image: linear-gradient(100deg, rgba($color-white, 0), rgba($color-white, 0.05) 50%, rgba($color-white, 0) 80%);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: rem(100) rem(50);
    animation: c-accordion-skeleton-load 1.5s infinite;
  }
}
.c-accordion--skeleton--hiding {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 1s linear;
  opacity: 0;
}
@keyframes c-accordion-skeleton-load {
  to {
    background-position: 100% 0;
  }
}
