
.tm-accordion {
  .card {
    margin-bottom: 10px;
    overflow: hidden;
    border: 0;
    @include box-shadow( 0 0 18px 0 rgba(0,0,0,0.15) );
    .card-header {
      background-color: #fff;
      border-top: none;
      &:hover {
        cursor: pointer;
      }
      .title {
        padding: 1rem 2.5rem 1rem 1.5rem;
        margin: 0;
        position: relative;
        @include transition(all .3s ease-in-out);
        .accordion-controls-icon {
          opacity: 0.4;
          position: absolute;
          right: 20px;
          top: 50%;
          font-size: 0.8rem;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          @include transition(all .3s ease-in-out);
        }
        &:not(.collapsed) {
          .accordion-controls-icon {
            -webkit-transform: translateY(-50%) rotate(180deg);
            -ms-transform: translateY(-50%) rotate(180deg);
            transform: translateY(-50%) rotate(180deg);
          }
        }
      }
    }
    .card-body {
      padding: 1rem 1.5rem;
    }
  }


  &.accordion-theme-colored1 {
    .card {
      border-color: var(--theme-color1);
    }
  }
  &.accordion-theme-colored2 {
    .card {
      border-color: var(--theme-color2);
    }
  }
  &.accordion-theme-colored3 {
    .card {
      border-color: var(--theme-color3);
    }
  }
  &.accordion-theme-colored4 {
    .card {
      border-color: var(--theme-color4);
    }
  }


  &.accordion-classic {
    .card {
      .card-header {
        .title:not(.collapsed) {
          background-color: #f5f5f5;
        }
      }
    }
    &.accordion-theme-colored1 {
      .card {
        .card-header {
          .title:not(.collapsed) {
            background-color: var(--theme-color1);
            color: var(--text-color-bg-theme-color1);
          }
        }
      }
    }
    &.accordion-theme-colored2 {
      .card {
        .card-header {
          .title:not(.collapsed) {
            background-color: var(--theme-color2);
            color: var(--text-color-bg-theme-color2);
          }
        }
      }
    }
    &.accordion-theme-colored3 {
      .card {
        .card-header {
          .title:not(.collapsed) {
            background-color: var(--theme-color3);
            color: var(--text-color-bg-theme-color3);
          }
        }
      }
    }
    &.accordion-theme-colored4 {
      .card {
        .card-header {
          .title:not(.collapsed) {
            background-color: var(--theme-color4);
            color: var(--text-color-bg-theme-color4);
          }
        }
      }
    }
  }

  &.accordion-gradient {
    .card {
      .card-header {
        .title:not(.collapsed) {
          background: rgb(230,230,230);
          background: linear-gradient(0deg, rgba(230,230,230,1) 0%, rgba(255,255,255,1) 45%, rgba(230,230,230,1) 100%);
        }
      }
    }
  }





  &.accordion-active-light {
    .card {
      .card-header {
        .title {
          background-color: var(--theme-color1);
          color: var(--text-color-bg-theme-color1);
          .accordion-controls-icon {
            color: var(--text-color-bg-theme-color1);
            opacity: 1;
          }
          &:not(.collapsed) {
            background-color: #fff;
            color: #111;
            .accordion-controls-icon {
              color: #111;
            }
          }
        }
      }
    }
    &.accordion-theme-colored1 {
      .card {
        .card-header {
          .title.collapsed {
            background-color: var(--theme-color1);
          }
        }
      }
    }
    &.accordion-theme-colored2 {
      .card {
        .card-header {
          .title.collapsed {
            background-color: var(--theme-color2);
          }
        }
      }
    }
    &.accordion-theme-colored3 {
      .card {
        .card-header {
          .title.collapsed {
            background-color: var(--theme-color3);
          }
        }
      }
    }
    &.accordion-theme-colored4 {
      .card {
        .card-header {
          .title.collapsed {
            background-color: var(--theme-color4);
          }
        }
      }
    }
  }


}