@import '../../styles/utils/mixins';

.collapsible {
  border-radius: var(--base-border-radius);
  border: 1px solid var(--hr-color);
  backdrop-filter: blur(10px);
  @include generatePxToRem('margin', 10 0);
  padding: 0;
  overflow: hidden;

  // Make the breaks extend edge-to-edge
  hr {
    width: 120%;
    @include generatePxToRem('margin', 12 -12 16 -12, !important);
  }

  &_heading {
    @include flex(row, initial, center, nowrap);
    transition: all 0.5s ease;
    @include generatePxToRem('padding', 8);

    > h5 {
      @include collapse-children-heading-text();
      @include generatePxToRem('margin', 0 0 0 10, !important);

      font-family: var(--font-family-mono);
      font-weight: normal;
      @include generatePxToRem('font-size', 14);
    }

    &:hover {
      cursor: pointer;

      > h5 {
        color: var(--text-emphasis);
      }

      path {
        stroke: var(--text-emphasis);
      }
    }
  }

  &_body {
    @include generatePxToRem('padding', 12);
    border-top: 1px solid var(--hr-color);

    table {
      @include generatePxToRem(margin, -12, !important);
    }

    > p:not(:last-child) {
      @include generatePxToRem('margin', 10 0 10 0, !important);
    }

    & > *:last-child {
      @include desktopMin1400 {
        margin-bottom: 3px;
      }
    }
  }
}
