@import 'scss/font-family.scss';
@import 'theme/variables.scss';

@import 'scss/mixins.scss';

.accordion-collapse {
  margin-top: 0 !important;
}

.accordion-item {
  border: unset !important;
  margin-bottom: 3px !important;
  background-color: transparent !important;

  .accordion-header {
    cursor: pointer;
    padding: 4px 4px 4px 8px;
    background-color: $white-2;
    border-radius: 4px !important;


    .header-content {
      font-family: $font-family;
      font-size: 14px;
      color: $grey-2;

      .font-weight-600 {
        font-weight: 600;
      }

      .item-text {
        color: $bw6-2;

        span {
          @include text-selection($bw6-2);
        }
      }

      .item-type {
        @include text-selection($grey-2);
      }

      &.is-expanded {
        color: $white-2;

        .item-text {
          span {
            color: $white-2;
            @include text-selection($white-2);
          }
        }

        .item-type {
          @include text-selection($white-2);
        }
      }

      .heading-count {
        background-color: $grey;
        border-radius: 10px;
        height: 18px;
        padding: 2px 5px;
        min-width: 18px;

        &.is-expanded {
          background-color: $bw-9;
        }

        .item-count {
          font-size: 11px;
          color: $white-2;

          &.is-expanded {
            color: $black;
          }
        }
      }
    }

    &.is-expanded {
      background-color: $black;
      border-radius: 4px;
      color: $white-2;

      .item-text {
        span {
          @include text-selection($white-2);
        }
      }

      .item-type {
        @include text-selection($white-2);
      }

    }

    .header-content-right {
      font-family: $font-family;
      font-size: 11px;

      &.is-expanded {
        color: $white-2;
      }

      .date {
        background-color: $grey-12;
        color: $black;
        padding: 2px 5px;
        border-radius: 2px;

        &.is-expanded {
          background-color: $grey-15;
          color: $white-2;
        }
      }

      .me-1 {
        padding-left: 8px;
      }

      .amount {
        padding: 2px 5px;
        border-radius: 2px;

        &.danger {
          background-color: $white-8;
          color: $red-9;
        }

        &.positive {
          background-color: $ta-blue-16;
          color: $blue-11;
        }

        &.success {
          background-color: $green-9;
          color: $green-7;
        }

        &.is-danger-expanded {
          background-color: $red-10;
          color: $white-2;
        }

        &.is-positive-expanded {
          background-color: $blue-12;
          color: $white-2;
        }

        &.is-success-expanded {
          background-color: $green-8;
          color: $white-2;
        }
      }

      .svg_rotate {
        svg {
          transform: rotate(180deg);
          transition: transform 0.2s ease-in-out;
        }
      }

      .rotate_back {
        svg {
          transform: rotate(0deg);
          transition: transform 0.2s ease-in-out;
        }
      }
    }

    &:not(.is-expanded):hover {
      .header-content {
        color: $black;

        .item-text {
          span {
            @include text-selection($black);
          }
        }

        .item-type {
          @include text-selection($black);
        }

        .heading-count {
          background-color: $grey-2;
        }
      }

      svg {
        path {
          fill: $black;
        }
      }
    }

    &:hover {
      .header-content {
        color: $white-2;

        .item-text {
          span {
            @include text-selection($white-2);
          }
        }

        .item-type {
          @include text-selection($white-2);
        }

        .heading-count {
          background-color: $white;
        }
      }

      svg {
        path {
          fill: $white;
        }
      }
    }
  }

  .accordion-body {
    padding: 0px;
  }

  .accordion-toggle-icon {
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
  }
}