@use '../mixins/colors';

details.notion-toggle-heading_1,
details.notion-toggle-heading_2,
details.notion-toggle-heading_3 {
  @include colors.background-color;
  @include colors.foreground-color;

  &[open] {
    h1,
    h2,
    h3 {
      &::before {
        transform: rotate(0deg);
      }
    }
  }

  summary {
    display: block;
    cursor: pointer;
    user-select: none;

    h1,
    h2,
    h3 {
      display: flex;
      align-items: center;

      &::before {
        content: '';
        transform: rotate(-90deg);
        width: 0.6875rem;
        height: 0.6875rem;
        margin: 11px;
        box-shadow: inset 1em 1em black;
        clip-path: polygon(100% 0%, 5% 0%, 50% 100%);
      }
    }
  }

  p {
    padding-left: 33px;
  }
}