$panel: 'cp-ui-panel';
$accordion: 'cp-ui-accordion';

.#{$accordion} {
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.65);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fafafa;
  border-radius: 4px;

  &-border {
    border: 1px solid #d9d9d9;
    border-bottom: 0;
  }

  .#{$panel} {
    border-bottom: 1px solid #d9d9d9;

    &-title {
      display: flex;
      align-items: center;
      padding: 12px;
      cursor: pointer;

      .cp-ui-icon {
        font-size: 12px;
        transition: all 0.3s;
      }

      &-content {
        margin-left: 10px;
      }


    }

    &-right-icon {
      flex: 1;
      text-align: right;
      align-self: center;

      .cp-ui-icon {
        font-size: 1rem;
      }
    }

    &-body {
      padding: 0 12px;
      background: #fff;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);

      &.#{$panel}-body-inactive {
        opacity: 0;
        height: 0;
      }

      &.#{$panel}-body-active {
        height: auto;
        opacity: 1;
        padding: 16px 12px;
      }
    }

    &-expanded {}

    &-disabled {
      .#{$panel}-title {
        cursor: not-allowed;
        opacity: 0.5;
      }
    }
  }
}