.page-styles_shape {
  .demos {
    display: flex;
    flex-wrap: wrap;
  }

  .demo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 128px;
    height: 128px;
    margin: 0 10px 10px 0;
    background: #e5e5e5;
  }

  .mdc-shape--rounded {
    &.mdc-shape--medium {
      border-radius: 16px;
    }

    &.mdc-shape--large {
      border-radius: 24px;
    }
  }

  .mdc-shape--cut {
    &.mdc-shape--small {
      clip-path: polygon(
        0% 4px,
        4px 0%,
        calc(100% - 4px) 0,
        100% 4px,
        100% calc(100% - 4px),
        calc(100% - 4px) 100%,
        4px 100%,
        0px calc(100% - 4px)
      );
    }
    &.mdc-shape--medium {
      clip-path: polygon(
        0% 8px,
        8px 0%,
        calc(100% - 8px) 0,
        100% 8px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0px calc(100% - 8px)
      );
    }
    &.mdc-shape--large {
      clip-path: polygon(
        0% 12px,
        12px 0%,
        calc(100% - 12px) 0,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0px calc(100% - 12px)
      );
    }
  }
}
