@use '../global/index' as global;

.mdc-typography--custom-style-1 {
  color: red;
}

.mdc-typography--custom-style-2 {
  color: blue;
}

.page-styles_typography {
  .demo-typography--section {
    margin: 24px;
    padding: 24px;
    border: 1px solid #ddd;

    & > div {
      margin-bottom: 20px;
    }
  }

  .demo-typography--headline > * {
    @include global.ellipsis(100%, block);
  }

  .demo-typography--heading-baseline {
    margin-left: 24px;
  }

  .markdown-body table td:nth-child(2) {
    color: currentColor;
    font-size: 16px;
  }
}
