// Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

@include exports('accordion.clarity') {
  .clr-accordion {
    display: block;
    counter-reset: accordion;
    margin-bottom: 1rem;
  }

  .clr-accordion-panel {
    display: block;
  }

  .clr-accordion-header {
    color: $clr-accordion-text-color;
    border: 1px solid $clr-accordion-border-color;
    box-shadow: inset $clr-accordion-border-left-width 0 0 $clr-accordion-border-left-color;
    background: $clr-accordion-header-background-color;
    transition: all 200ms ease-in-out;
    border-bottom: 0;
    width: 100%;
    font-size: 0.65rem;
    text-align: left;

    &:hover {
      background-color: $clr-accordion-header-hover-background-color;
    }
  }

  .clr-accordion-panel:last-child {
    .clr-accordion-content,
    .clr-accordion-header {
      border-bottom: 1px solid $clr-accordion-border-color;
    }
  }

  .clr-accordion-number {
    padding: 0 0.75rem;
    display: none;

    &::before {
      content: counter(accordion) '.';
      counter-increment: accordion;
    }
  }

  .clr-accordion-header-button {
    display: flex;
    flex-flow: row wrap;
    flex: 1 1 0%;
    width: 100%;
    border: 0;
    padding: $clr-accordion-padding;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: $clr-accordion-text-color;

    @media (min-width: $clr-accordion-responsive-breakpoint) {
      flex-flow: row;
    }
  }

  .clr-accordion-status {
    width: 1.5rem;
    display: inline-block;
    vertical-align: top;
  }

  .clr-accordion-title {
    display: inline-block;

    @media (min-width: $clr-accordion-responsive-breakpoint) {
      min-width: 7.2rem;
    }
  }

  .clr-accordion-header-has-description {
    .clr-accordion-title {
      max-width: 11rem;
    }
  }

  .clr-accordion-description {
    display: inline-block;
    max-width: 650px;

    @media (min-width: $clr-accordion-responsive-breakpoint) {
      margin-left: 1.5rem;
    }
  }

  .clr-accordion-content {
    background: $clr-accordion-content-background-color;
    border: 1px solid $clr-accordion-border-color;
    border-bottom: 0;
    overflow: hidden;
    padding: 0.75rem;
    display: none;

    .clr-form {
      padding: 0;
    }

    &.ng-trigger {
      padding: 0; // inner element/padding to prevent extra hight in ng animation
    }

    @media (min-width: $clr-accordion-responsive-breakpoint) {
      padding: 0.75rem 2.25rem;
    }
  }

  .clr-accordion-inner-content {
    padding: 0.75rem;

    @media (min-width: $clr-accordion-responsive-breakpoint) {
      padding: 0.75rem 2.25rem;
    }
  }

  .clr-accordion-angle {
    transition: all 200ms ease-in-out;
  }

  .clr-accordion-error-icon,
  .clr-accordion-complete-icon {
    display: none;
    width: 1rem;
    height: 1rem;
    padding: 0;
    margin: 0 0.5rem;
  }

  // panel states
  .clr-accordion-panel-open {
    .clr-accordion-content {
      display: block;
    }

    .clr-accordion-angle {
      visibility: visible;
      transform: rotate(90deg);
    }

    .clr-accordion-header {
      background: $clr-accordion-active-background-color;
    }
  }

  .clr-accordion-panel-complete {
    .clr-accordion-complete-icon {
      display: inline-block;
      color: $clr-accordion-complete-color;
    }

    .clr-accordion-angle {
      visibility: visible;
    }

    .clr-accordion-header {
      box-shadow: inset $clr-accordion-border-left-width 0 0 $clr-accordion-border-left-color-complete;
    }

    .ng-trigger.clr-accordion-content {
      display: block;
    }
  }

  .clr-accordion-panel-error {
    .clr-accordion-header {
      border-color: $clr-accordion-border-left-color-error;
      box-shadow: inset $clr-accordion-border-left-width 0 0 $clr-accordion-border-left-color-error;
      border-bottom: 1px solid $clr-accordion-border-left-color-error;
      background-color: $clr-accordion-active-background-color;
    }

    .clr-accordion-error-icon {
      display: inline-block;
      color: $clr-accordion-error-color;
    }
  }

  .clr-accordion-panel-error .clr-accordion-number,
  .clr-accordion-panel-complete .clr-accordion-number {
    @include screen-reader-only();
  }

  // temporary overrides to match stackview until stepper, accordion and stackview are aligned
  // https://github.com/vmware/clarity/issues/3471
  .clr-accordion:not(.clr-stepper-forms) {
    .clr-accordion-header {
      box-shadow: none;
    }

    .clr-accordion-panel:first-child .clr-accordion-header {
      border-top-left-radius: $clr-accordion-border-radius;
      border-top-right-radius: $clr-accordion-border-radius;
    }

    .clr-accordion-panel:last-child {
      .clr-accordion-header {
        border-bottom-left-radius: $clr-accordion-border-radius;
        border-bottom-right-radius: $clr-accordion-border-radius;
      }

      .clr-accordion-panel-open {
        .clr-accordion-header {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          border-bottom: 0;
        }
      }
    }

    .clr-accordion-title {
      font-weight: 500;
      font-size: 0.541667rem;
    }

    .clr-accordion-header-button {
      padding: 0.25rem 0.5rem;
      font-size: 0.5rem;
    }

    .clr-accordion-content {
      padding: 0;
    }

    .clr-accordion-inner-content {
      padding: 0.25rem 1.45833rem;
    }

    .clr-accordion-status {
      width: 0.8rem;

      clr-icon {
        width: 0.58333rem;
        height: 0.58333rem;
      }
    }
  }

  // stepper forms mode
  .clr-stepper-forms {
    .clr-accordion-panel-inactive .clr-accordion-angle {
      visibility: hidden;
    }

    .clr-accordion-panel-open .clr-accordion-angle {
      visibility: visible;
    }

    .clr-accordion-status {
      min-width: 3rem;
    }

    .clr-accordion-number {
      display: inline-block;
    }
  }

  .clr-step-button {
    display: block;
    margin-top: 1rem;
  }
}