$transition-timer:0.4s;

.mx {
  &-collapse-item {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #E5E5E8;
    &:last-child{
      border-bottom: 0;
    }
    &--active {
      border-bottom: 0;
    }

    &-header {
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;

      &-title {
        font-size: 16px;
        color: #000000;
      }    
    }

    &-content {
      transition: height $duration $time-function;
      overflow: hidden;
      height: auto;
      background: #F9F9F9;
      padding: 0 16px;
      will-change: height;
    }

    &-icon{
      transition: transform $duration $time-function;
      transform-origin: center center;
      will-change: transform;

      &--active{
        transform: rotateZ(-180deg);
      }
    }
  }
}