/**
 * Collapse 折叠面板
 * @Author 瞿龙俊 - qulongjun@shine.design
 * @Date 2019/3/24 14:43
 */

.accordion {
  .card {
    margin: 0;

    .card-header {
      cursor: pointer;
      margin: 0;
      padding: 0;
      border-bottom: 0;

      .card-title {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 500;
        padding: 1rem 1rem;
        color: shine-state-color(brand, base);
        display: flex;
        justify-content: flex-start;
        align-items: center;

        > i {
          margin-right: 1rem;
          font-size: 1.4rem;
          color: shine-state-color(brand, base);
        }

        &.collapsed {
          color: shine-base-color(label, 3);

          > i {
            color: shine-base-color(label, 2);
          }
        }

        &:after {
          right: 1rem;
        }
      }
    }

    .card-body {
      padding: 1.25rem;
      font-size: 1rem;
    }
  }

  &--no-bg {
    .card {
      background-color: transparent;
    }
  }
}

// Light Accordion
.accordion.accordion-light {
  .card {
    border: 0;
    border-top: 1px solid #eeeef4;
    margin: 0;

    .card-header {
      cursor: pointer;
      padding: 0;
      margin: 0;
      background-color: transparent;
      border: 0;

      .card-title {
        margin: 0;
        font-size: 1.1rem;
        padding: 1rem 1rem 1rem 0;
        font-weight: 500;
        color: shine-state-color(brand, base);

        &.collapsed {
          color: shine-base-color(label, 2);

          &:after {
            color: shine-base-color(label, 2);
          }
        }

        &:after {
          right: 0;
        }
      }
    }

    .card-body {
      padding: 0;
      margin-bottom: 1.25rem;
      font-size: 1rem;
    }

    // remove border for the last item
    &:first-child {
      border-top: 0;

      .card-header {
        margin: 0;
      }
    }

    &:last-child {
      margin-bottom: 1.25rem;;

      .card-body {
        padding: 0;
        margin: 0;
      }
    }
  }
}

// Outline Accordion
.accordion.accordion-outline {

  &--padded {
    padding: 1.7rem;
  }

  .card {
    margin-bottom: 1.25rem;
    border: 0;

    .card-header {
      padding: 0;
      background-color: transparent;

      .card-title {
        font-size: 1.1rem;
        padding: 1.25rem;
        border-color: lighten(shine-state-color(brand, base), 20%);
        border-top-width: 2px;
        border-right-width: 2px;
        border-bottom-width: 0;
        padding-bottom: calc(1.5rem + 2px);
        border-left-width: 2px;
        border-style: solid;
        border-top-left-radius: $shine-border-radius !important;
        border-top-right-radius: $shine-border-radius !important;

        &:after {
          position: absolute;
          right: 1.25rem;
          @include shine-la-icon-self(shine-get($shine-action-icons, minus));
          font-size: 1.7rem;
          font-weight: bold;
          color: shine-state-color(brand, base);
        }

        &.collapsed {
          color: #464457;
          border-color: #efeff0;
          border-bottom-width: 2px;
          padding-bottom: 1.5rem;
          border-bottom-left-radius: $shine-border-radius !important;
          border-bottom-right-radius: $shine-border-radius !important;

          &:after {
            content: '#{shine-get($shine-action-icons, plus)}';
            color: #efeff0;
          }
        }
      }
    }

    .card-body-wrapper {
      > .card-body {
        padding: 0 2.7rem 1.7rem 1.7rem;
        font-size: 1.1rem;
        font-weight: 400;
        border-color: lighten(shine-state-color(brand, base), 20%);
        border-top-width: 0;
        border-right-width: 2px;
        border-bottom-width: 2px;
        border-left-width: 2px;
        border-style: solid;
        border-bottom-left-radius: $shine-border-radius !important;
        border-bottom-right-radius: $shine-border-radius !important;
        color: #8d8c9b;

        > p:last-child {
          margin-bottom: 0;
        }
      }
    }

    // remove margin on last item
    &:last-child {
      margin-bottom: 0;
    }
  }
}

// Solid Accordion
.accordion.accordion-solid {
  .card {
    margin-bottom: 1.5rem;
    border: 0;

    &:last-child {
      margin-bottom: 0;
    }

    .card-header {
      padding: 0;
      background-color: transparent;

      .card-title {
        font-size: 1.1rem;
        padding: 1.25rem;
        background-color: shine-base-color(grey, 1);

        @include shine-rounded {
          border-radius: $shine-border-radius;
        }

        &.collapsed {
          @include shine-rounded {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
      }

    }

    .card-body {
      border: 1px solid shine-base-color(grey, 1);

      @include shine-rounded {
        border-bottom-left-radius: $shine-border-radius;
        border-bottom-right-radius: $shine-border-radius;
      }
    }
  }
}

// Custom toggle icon
.accordion.accordion-toggle-arrow {
  .card {
    .card-header {
      .card-title {
        color: shine-state-color(brand, base);
        position: relative;

        &:after {
          position: absolute;
          font-size: 1rem;
          @include shine-la-icon-self(shine-get($shine-action-icons, down));
          color: shine-state-color(brand, base);
        }

        &.collapsed {
          color: shine-base-color(label, 2);

          &:after {
            color: shine-base-color(label, 2);
            content: '#{shine-get($shine-action-icons, right)}';
          }
        }
      }
    }
  }
}

// Custom toggle icon
.accordion.accordion-toggle-plus {
  .card {
    .card-header {
      .card-title {
        color: shine-brand-color();
        position: relative;

        &:after {
          position: absolute;
          @include shine-la-icon-self(shine-get($shine-action-icons, minus));
          font-size: 1.2rem;
          color: shine-brand-color();
        }

        &.collapsed {
          color: shine-base-color(label, 2);

          &:after {
            color: shine-base-color(label, 2);
            content: '#{shine-get($shine-action-icons, plus)}';
          }
        }
      }
    }
  }
}

// SVG icon
.accordion.accordion-svg-icon {
  .card {
    border-top: 0;

    .card-header {
      .card-title {
        color: shine-base-color(label, 4);
        position: relative;
        font-size: 1.2rem;

        .#{$classPrefix}-svg-icon {
          margin-right: 1.2rem;
          transform: rotate(90deg);
          flex: 0 0 2rem;
          @include shine-transition;
        }

        &.collapsed {
          color: shine-base-color(label, 4);

          .#{$classPrefix}-svg-icon {
            transform: rotate(0);
          }
        }
      }
    }

    .card-body {
      padding-left: 3.2rem;
    }

    &:last-child {
      .card-body {
        padding-left: 3.2rem;
      }
    }
  }
}

// SVG toggle
.accordion.accordion-toggle-svg {
  .card {

    .card-header {
      .card-title {
        color: shine-base-color(label, 4);
        font-size: 1.2rem;
        background-color: shine-state-color(brand, inverse);

        .#{$classPrefix}-svg-icon {
          margin: auto 0 auto auto;
          transform: rotate(90deg);
          @include shine-transition;
        }

        &.collapsed {
          color: shine-base-color(label, 4);

          .#{$classPrefix}-svg-icon {
            transform: rotate(0);
          }
        }
      }
    }
  }
}