/* ###### 4.1 Accordion ###### */

.az-accordion {
  .accordion-item {
    background-color: $gray-100;
    border: 1px solid $az-border-base;
    position: relative;
    @include transition($transition-base);

    &:hover-focus() {
      cursor: pointer;
      background-color: darken($gray-100, 1%);
      border-color: darken($az-border-base, 10%);
      z-index: 4;
    }

    &.active {
      background-color: #fff;
      z-index: 5;
      border-color: darken($az-border-base, 10%);

      .accordion-title { color: $blue; }
      .accordion-body { display: block; }
    }

    + .accordion-item { margin-top: -1px; }
  }

  .accordion-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
  }

  .accordion-title {
    font-weight: 700;
    color: $body-color;
    margin: 0;
    @include transition($transition-base);
  }

  .accordion-body {
    display: none;
    padding: 0 20px 20px;
  }
}

/* Accordions */

.accordion {
  .card {
    margin-bottom: .75rem;
    box-shadow: 0px 1px 15px 1px $accordian-shadow-color;    
    border-radius: .25rem;
    .card-header {
      background-color: transparent;
      border: none;
      padding: 0;
      * {
        font-size: 1rem;        
      }
      a {
        display: block;
        color: inherit;
        text-decoration: none;
        font-size: inherit; 
        position: relative;
        @include transition(color .5s ease);
        padding-right: .5rem;
        &:before {
          font-family:"typicons";
          position: absolute;
          right: 1rem;
          top: 1rem;
          font-size: 18px;
          display: block;
        }
        &[aria-expanded="true"] {
          color: theme-color(primary);
          &:before {
            content: "\e0bd";
          }
        }
        &[aria-expanded="false"] {
          &:before{
            content: "\e0cf";
          }
        }
      }
    }
    .card-body {
      font-size: 14px;
      padding: 0 2rem 2rem 2rem;
      line-height: 1.5;
      i {
        font-size: 1.25rem;
      }
    }
  }
  &.accordion-bordered {
    box-shadow: 0px 1px 15px 1px $accordian-shadow-color;    
    .card {
      margin: 0 2rem;
      border-top: 1px solid $border-color;
      box-shadow: none;
      border-radius: 0;
      .card-header,
      .card-body {
        padding-left: 0;
        padding-right: 0;
      }
      .card-header {
        a {
          &:before {
            color: theme-color(danger);
          }
          &[aria-expanded="true"] {
            color: inherit;
            &:before {
              content: "\F0062";
            }
          }
          &[aria-expanded="false"] {
            &:before {
              content: "\F004A";
            }
          }
        }
      }
      &:first-child {
        border-top: 0;
      }
    }
  }
  &.accordion-filled {
    .card {
      padding: 0;
      .card-header {
        padding: 0;        
        a {
          padding: 2rem 4.5rem 2rem 2rem;
          @include transition(all .2s linear);
          &:before {
            top: 40%;
            right: 40px;
          }
          &[aria-expanded="true"] {
            background: theme-gradient-color(info);
            color: $white;
            &:before {
              content: "\F0143";
              color: $white;
            }
          }
          &[aria-expanded="false"] {
            &:before {
              content: "\f0140";
            }
          }
        }
      }
      .card-body {
        padding: 0 2rem 2rem 2rem;
        background: theme-gradient-color(info);
        color: $white;
      }
    }
  }
  &.accordion-solid-header {
    .card {
      padding: 0;
      .card-header {
        padding: 0;        
        a {
          padding: 2rem 4.5rem 2rem 2rem;
          @include transition(all .2s linear);
          &:before {
            top: 40%;
            right: 40px;
          }
          &[aria-expanded="true"] {
            background: theme-gradient-color(primary);
            color: $white;
            &:before {
              content: "\F0143";
              color: $white;
            }
          }
          &[aria-expanded="false"] {
            &:before {
              content: "\f0140";
            }
          }
        }
      }
      .card-body {
        padding: 2rem;
      }
    }
  }
  &.accordion-solid-content {
    .card {
      padding: 0;
      .card-header {
        padding: 0;        
        a {
          padding: 2rem 4.5rem 2rem 2rem;
          @include transition(all .2s linear);
          &:before {
            top: 40%;
            right: 40px;
          }
          &[aria-expanded="true"] {
            color: inherit;
            &:before {
              content: "\F0143";
            }
          }
          &[aria-expanded="false"] {
            &:before {
              content: "\f0140";
            }
          }
        }
      }
      .card-body {
        padding: 2rem;
        background: theme-gradient-color(success);
        color: $white;
      }
    }
  }
  &.accordion-multi-colored {
    .card {
      .card-header,
      .card-body {
        background: transparent;
        color: $white;
      }
      &:nth-child(1) {
        background: theme-gradient-color(primary);
      }
      &:nth-child(2) {
        background: theme-gradient-color(success);
      }
      &:nth-child(3) {
        background: theme-gradient-color(danger);
      }
      &:nth-child(4) {
        background: theme-gradient-color(warning);
      }
      &:nth-child(5) {
        background: theme-gradient-color(info);
      }
      .card-header {
        a {
          &[aria-expanded="true"] {
            color: inherit;
            &:before {
              content: "\F0143";
            }
          }
          &[aria-expanded="false"] {
            &:before {
              content: "\f0140";
            }
          }
        }
      }
    }
  }
}

