@use "../../styles/utils";
@use "./variables" as locals;

@include utils.layer {
  .Block {
    width: 100%;
  }

  .details {
    border-bottom: 1px solid var(--cmm-color-border-base);

    &:first-of-type {
      border-top: 1px solid var(--cmm-color-border-base);
    }

    &[open] {
      .summary {
        > svg {
          rotate: -180deg;
        }
      }
    }
  }

  .summary {
    display: block;
    cursor: pointer;
    padding: locals.$summaryPad;
    display: grid;
    grid-template-columns: 1fr auto;
    user-select: none;
    transition: var(--cmm-transition-bg);
    color: var(--cmm-color-font-base);

    &::-webkit-details-marker {
      display: none;
    }

    > svg {
      color: var(--cmm-color-font-muted);
      width: locals.$markerSize;
      height: locals.$markerSize;
    }
  }

  .content {
    padding: locals.$contentPad;
    font-weight: var(--cmm-font-weight-normal);
    color: var(--cmm-color-font-muted);
  }
}
