@use '@nu-art/ts-styles' as styles;

.ts-collapsable-container-v2 {
  width: 100%;
  background: styles.gray-blue(7);

  .ts-collapsable-container-v2__header {
    width: 100%;
    height: 32px;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    background: styles.gray-blue(5);

    .ts-collapsable-container-v2__header-content {
      padding-left: 6px;
      color: #fff;
      font: {
        size: 14px;
        weight: bold;
      }
    }

    .icon--wrapper {
      height: 100%;
      width: unset;
      aspect-ratio: 1;
      padding: 6px;
      rotate: 90deg;
      @include styles.mouseInteractiveIcon(#fff);
    }
  }

  .ts-collapsable-container-v2__content {
    width: 100%;
    display: grid;
    grid-template-rows: 1fr;

    .ts-collapsable-container-v2__content-inner {
      width: 100%;
      overflow: hidden;
    }
  }

  &.animated {
    .ts-collapsable-container-v2__header {
      .icon--wrapper {
        transition: rotate 0.3s ease;
      }
    }

    .ts-collapsable-container-v2__content {
      transition: grid-template-rows 0.3s ease;
    }
  }

  &.collapsed {
    .ts-collapsable-container-v2__header {
      .icon--wrapper {
        rotate: 0deg;
      }
    }

    .ts-collapsable-container-v2__content {
      grid-template-rows: 0fr;
    }
  }
}