@shortfuse/materialdesignweb 0.7.0 → 0.7.1-1

package/components/Outline.css

@@ -1,138 +0,0 @@
-.outline {
-  position: absolute;
-  inset: 0;
-
-  pointer-events: none;
-
-  border-color: currentColor;
-  border-radius: inherit;
-  color: rgb(var(--mdw-color__outline));
-}
-
-.outline:is([pressed],[focused]) {
-  color: rgb(var(--mdw-ink));
-
-  transition-delay: 0;
-  transition-duration: 0;
-}
-
-.outline[disabled] {
-  color: rgba(var(--mdw-color__on-surface), 0.12);
-}
-
-.outline::before {
-  content: '';
-
-  position: absolute;
-  inset: 0;
-
-  border-style: solid;
-  border-width: 1px;
-
-  border-radius: inherit;
-}
-
-@supports(-webkit-mask-box-image: none) {
-  .outline::before {
-    content: none;
-  }
-
-  .outline::after {
-    content: '';
-
-    position: absolute;
-    inset: 0;
-
-    -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
-      8 fill /
-      auto
-      stretch;
-
-    background-color: currentColor;
-  }
-
-  .outline-section {
-    position: absolute;
-    inset: 0;
-  }
-
-  .outline-section::before,
-  .outline-section::after {
-    content: "";
-
-    position: absolute;
-
-    max-block-size: 50%;
-    max-inline-size: 50%;
-
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: contain;
-
-    background-color: currentColor;
-
-    transition-duration: 200ms;
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    transition-property: width, height;
-  }
-
-  .outline-left::before {
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    left: calc(-1px * var(--mdw-shape__convex));
-    inset-block-start: calc(-1px * var(--mdw-shape__convex));
-
-    block-size: calc(var(--mdw-shape__size__top-left-size));
-    inline-size: calc(var(--mdw-shape__size__top-left-size));
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    padding-right: calc(2px * var(--mdw-shape__convex));
-    padding-block-end: calc(2px * var(--mdw-shape__convex));
-
-    -webkit-mask-image: var(--mdw-shape__mask-image__top-left);
-  }
-
-  .outline-left::after {
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    left: calc(-1px * var(--mdw-shape__convex));
-    inset-block-end: calc(-1px * var(--mdw-shape__convex));
-
-    block-size: var(--mdw-shape__size__bottom-left-size);
-    inline-size: var(--mdw-shape__size__bottom-left-size);
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    padding-right: calc(2px * var(--mdw-shape__convex));
-    padding-block-start: calc(2px * var(--mdw-shape__convex));
-
-    -webkit-mask-image: var(--mdw-shape__mask-image__bottom-left);
-    -webkit-mask-position-y: 100%;
-  }
-
-  .outline-right::before {
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    right: calc(-1px * var(--mdw-shape__convex));
-    inset-block-start: calc(-1px * var(--mdw-shape__convex));
-
-    block-size: var(--mdw-shape__size__top-right-size);
-    inline-size: var(--mdw-shape__size__top-right-size);
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    padding-left: calc(2px * var(--mdw-shape__convex));
-    padding-block-end: calc(2px * var(--mdw-shape__convex));
-
-    -webkit-mask-image: var(--mdw-shape__mask-image__top-right);
-    -webkit-mask-position-x: 100%;
-  }
-
-  .outline-right::after {
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    right: calc(-1px * var(--mdw-shape__convex));
-    inset-block-end: calc(-1px * var(--mdw-shape__convex));
-
-    block-size: var(--mdw-shape__size__bottom-right-size);
-    inline-size: var(--mdw-shape__size__bottom-right-size);
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    padding-left: calc(2px * var(--mdw-shape__convex));
-    padding-block-start: calc(2px * var(--mdw-shape__convex));
-
-    -webkit-mask-image: var(--mdw-shape__mask-image__bottom-right);
-    -webkit-mask-position-x: 100%;
-    -webkit-mask-position-y: 100%;
-  }
-
-}

package/components/Pane.css

@@ -1,261 +0,0 @@
-/* https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins */
-
-/*
- * Window breakpoints
- * Compact (0 <= width < 600px):
- *   * Single: 100vw - padding
- *   * Padding: 16px
- *   * Spacer: 0 (none)
- * Medium (600px <= width < 840px)
- *   * Single: 100vw - padding - (?navrail)
- *   * [Fixed]: 360px
- *   * [Flexable]: 100vw - 360px - spacer - padding
- *   * [Split] 50vw - ((padding + spacer) / 2)
- *   * Padding: 24px
- *   * Spacer: 24px
- * Expanded (840px <= width)
- *   * Single: 100vw - padding - (?navrail | ?navdrawer)
- *   * [Fixed] 360px
- *   * [Flexable] 100vw - 360px - spacer - padding - (?navrail | ?navdrawer)
- *   * [Split] 50vw - ((padding + spacer + (?navrail | ?navdrawer)) / 2)
- *   * Padding: 24px
- *   * Spacer: 24px
- *
- * | Screen size         | Margin  | Body    | Layout columns |
- * |---------------------|---------|---------|----------------|
- * | Extra-small (phone) |         |         |                |
- * | 0-631dp             | 16dp    | Scaling | 4              |
- * | 632 - 647           | Scaling | 600dp   | 8              |
- * | Small (tablet)      |         |         |                |
- * | 648-887             | 24dp    | Scaling | 8              |
- * | 888-1239            | Scaling | 840dp   | 12             |
- * | Medium (laptop)     |         |         |                |
- * | 1240-1439           | 200dp   | Scaling | 12             |
- * | Large (desktop)     |         |         |                |
- * | 1440+               | Scaling | 1040    | 12             |
- *
- *
- * Column count is pane-based, not window based requiring newly computed values.
- * Gutters are irrelevant to pane sizing.
- * Nav Rail is ~80px.
- * Nav Drawer is ~360px.
- * Padding and spacers are set by pane's parent.
- * Avoid using CSS Variables because panes are at top of document tree. https://bugs.chromium.org/p/chromium/issues/detail?id=1056209
- * Container queries would reduce code considerably.
- */
-
-/* Compact */
-:host {
-  display: grid;
-  align-content: flex-start;
-  gap: 16px;
-  grid-auto-flow: row;
-  grid-template-columns: repeat(4, 1fr);
-
-  max-inline-size: 600px;
-
-  flex: 1;
-
-  transition-duration: 200ms;
-  /* stylelint-disable-next-line liberty/use-logical-spec */
-  transition-property: visibility, width, max-inline-size;
-}
-
-/* Will set 8col when window is 600px + padding (2x16) */
-/* Will set 12col when window is 840px + padding (2x24) */
-@media screen and (min-width: 632px) { :host { grid-template-columns: repeat(8, 1fr); } }
-@media screen and (min-width: 888px) { :host { grid-template-columns: repeat(12, 1fr); } }
-
-/* Will cap to 840px when window is 600px + padding (2x24px) */
-/* Will cap to 1040px when window is 840px + padding (2x200px) */
-@media screen and (min-width: 648px) { :host { max-inline-size: 840px } }
-@media screen and (min-width: 1240px) { :host { max-inline-size: 1040px; } }
-
-/* NAVRAIL */
-
-:host([nav-rail]) {
-  grid-template-columns: repeat(4, 1fr);
-
-  max-inline-size: 600px;
-}
-
-/* Will set  8col when window is 600px + padding (2x24) + navrail (80)  */
-/* Will set 12col when window is 840px + padding (2x24) + navrail (80) */
-@media screen and (min-width: 728px) { :host([nav-rail]) { grid-template-columns: repeat(8, 1fr); } }
-@media screen and (min-width: 968px) { :host([nav-rail]) { grid-template-columns: repeat(12, 1fr); } }
-
-/* Will cap to  840px when window is 600px + padding (2x24px) + navrail (80) */
-/* Will cap to 1040px when window is 840px + padding (2x200px) + navrail (80) */
-@media screen and (min-width: 728px) { :host([nav-rail]) { max-inline-size: 840px } }
-@media screen and (min-width: 1320px) { :host([nav-rail]) { max-inline-size: 1040px; } }
-
-/* NAVDRAWER */
-
-:host([nav-drawer]) {
-  grid-template-columns: repeat(4, 1fr);
-
-  max-inline-size: 600px;
-}
-
-/* Will set  8col when window is 600px + padding (2x24) + navdrawer (360)  */
-/* Will set 12col when window is 840px + padding (2x24) + navdrawer (360) */
-@media screen and (min-width: 1008px) { :host([nav-rail]) { grid-template-columns: repeat(8, 1fr); } }
-@media screen and (min-width: 1248px) { :host([nav-rail]) { grid-template-columns: repeat(12, 1fr); } }
-
-/* Will cap to  840px when window is 600px + padding (2x24px) + navrail (360) */
-/* Will cap to 1040px when window is 840px + padding (2x200px) + navrail (360) */
-@media screen and (min-width: 1008px) { :host([nav-rail]) { max-inline-size: 840px } }
-@media screen and (min-width: 1600px) { :host([nav-rail]) { max-inline-size: 1040px; } }
-
-/* FLEXIBLE */
-
-:host([flexible]) {
-  grid-template-columns: repeat(4, 1fr);
-
-  max-inline-size: 600px;
-}
-
-/* Will set  8col when window is 600px + padding (2x24) + spacer (24) + fixed (360)  */
-/* Will set 12col when window is 840px + padding (2x24) + spacer (24) + fixed (360) */
-@media screen and (min-width: 1032px) { :host([flexible]) { grid-template-columns: repeat(8, 1fr); } }
-@media screen and (min-width: 1272px) { :host([flexible]) { grid-template-columns: repeat(12, 1fr); } }
-
-/* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + fixed (360) */
-/* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + fixed (360) */
-@media screen and (min-width: 1032px) { :host([flexible]) { max-inline-size: 840px } }
-@media screen and (min-width: 1624px) { :host([flexible]) { max-inline-size: 1040px; } }
-
-/* FLEXIBLE + NAV RAIL */
-
-:host([flexible]:where([nav-rail])) {
-  grid-template-columns: repeat(4, 1fr);
-
-  max-inline-size: 600px;
-}
-
-/* Will set  8col when window is 600px + padding (2x24) + spacer (24) + fixed (360) + navrail (80)   */
-/* Will set 12col when window is 840px + padding (2x24) + spacer (24) + fixed (360) + navrail (80) */
-@media screen and (min-width: 1112px) { :host([flexible]:where([nav-rail])) { grid-template-columns: repeat(8, 1fr); } }
-@media screen and (min-width: 1352px) { :host([flexible]:where([nav-rail])) { grid-template-columns: repeat(12, 1fr); } }
-
-/* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + fixed (360) + navrail (80) */
-/* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + fixed (360) + navrail (80) */
-@media screen and (min-width: 1112px) { :host([flexible]:where([nav-rail])) { max-inline-size: 840px } }
-@media screen and (min-width: 1704px) { :host([flexible]:where([nav-rail])) { max-inline-size: 1040px; } }
-
-/* FLEXIBLE + NAV DRAWER */
-
-:host([flexible]:where([nav-drawer])) {
-  grid-template-columns: repeat(4, 1fr);
-
-  max-inline-size: 600px;
-}
-
-/* Will set  8col when window is 600px + padding (2x24) + spacer (24) + fixed (360) + navdrawer (360)   */
-/* Will set 12col when window is 840px + padding (2x24) + spacer (24) + fixed (360) + navdrawer (360) */
-@media screen and (min-width: 1392px) { :host([flexible]:where([nav-drawer])) { grid-template-columns: repeat(8, 1fr); } }
-@media screen and (min-width: 1632px) { :host([flexible]:where([nav-drawer])) { grid-template-columns: repeat(12, 1fr); } }
-
-/* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + fixed (360) + navdrawer (360) */
-/* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + fixed (360) + navdrawer (360) */
-@media screen and (min-width: 1392px) { :host([flexible]:where([nav-drawer])) { max-inline-size: 840px } }
-@media screen and (min-width: 1984px) { :host([flexible]:where([nav-drawer])) { max-inline-size: 1040px; } }
-
-/* SPLIT */
-
-:host([split]) {
-  grid-template-columns: repeat(4, 1fr);
-
-  max-inline-size: 600px;
-}
-
-/* Will set  8col when window is 600px + padding (2x24) + spacer (24) + split (600)  */
-/* Will set 12col when window is 840px + padding (2x24) + spacer (24) + split (840) */
-@media screen and (min-width: 1272px) { :host([split]) { grid-template-columns: repeat(8, 1fr); } }
-@media screen and (min-width: 1752px) { :host([split]) { grid-template-columns: repeat(12, 1fr); } }
-
-/* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + split (600) */
-/* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + split (840) */
-@media screen and (min-width: 1272px) { :host([split]) { max-inline-size: 840px } }
-@media screen and (min-width: 2104px) { :host([split]) { max-inline-size: 1040px; } }
-
-/* SPLIT + NAVRAIL */
-
-:host([split]:where([nav-rail])) {
-  grid-template-columns: repeat(4, 1fr);
-
-  max-inline-size: 600px;
-}
-
-/* Will set  8col when window is 600px + padding (2x24) + spacer (24) + split (600) + navrail (80) */
-/* Will set 12col when window is 840px + padding (2x24) + spacer (24) + split (840) + navrail (80) */
-@media screen and (min-width: 1352px) { :host([split]:where([nav-rail])) { grid-template-columns: repeat(8, 1fr); } }
-@media screen and (min-width: 1832px) { :host([split]:where([nav-rail])) { grid-template-columns: repeat(12, 1fr); } }
-
-/* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + split (600) + navrail (80) */
-/* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + split (840) + navrail (80) */
-@media screen and (min-width: 1352px) { :host([split]:where([nav-rail])) { max-inline-size: 840px } }
-@media screen and (min-width: 2184px) { :host([split]:where([nav-rail])) { max-inline-size: 1040px; } }
-
-/* SPLIT + NAVDRAWER */
-
-:host([split]:where([nav-drawer])) {
-  grid-template-columns: repeat(4, 1fr);
-
-  max-inline-size: 600px;
-}
-
-/* Will set  8col when window is 600px + padding (2x24) + spacer (24) + split (600) + navdrawer (360)  */
-/* Will set 12col when window is 840px + padding (2x24) + spacer (24) + split (840) + navdrawer (360) */
-@media screen and (min-width: 1632px) { :host([split]:where([nav-drawer])) { grid-template-columns: repeat(8, 1fr); } }
-@media screen and (min-width: 2112px) { :host([split]:where([nav-drawer])) { grid-template-columns: repeat(12, 1fr); } }
-
-/* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + split (600) + navdrawer (360) */
-/* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + split (840) + navdrawer (360) */
-@media screen and (min-width: 1632px) { :host([split]:where([nav-drawer])) { max-inline-size: 840px } }
-@media screen and (min-width: 2464px) { :host([split]:where([nav-drawer])) { max-inline-size: 1040px; } }
-
-:host([full-width]) {
-  max-inline-size: none;
-}
-
-/** FIXED **/
-
-:host([fixed]) {
-  grid-template-columns: repeat(4, 1fr);
-
-  inline-size:360px;
-}
-
-@media screen and (max-width: 600px) {
-  :host(:nth-of-type(2)) {
-    display: none;
-  }
-}
-/* Will cap to 360px when window is 360px + padding (2x24px) + spacer (24) + 360px */
-@media screen and (min-width: 792px) {
-  :host([fixed]) {
-    max-inline-size: 360px
-  }
-}
-
-#scrim {
-  position: absolute;
-  inset: 0;
-
-  grid-area: auto;
-}
-
-#slot::slotted(*) { grid-column: 1 / none }
-#slot::slotted([colspan="1"]) { grid-column-end: span 1; }
-#slot::slotted([colspan="2"]) { grid-column-end: span 2; }
-#slot::slotted([colspan="3"]) { grid-column-end: span 3; }
-#slot::slotted([colspan="4"]) { grid-column-end: span 4; }
-#slot::slotted([colspan="5"]) { grid-column-end: span 5; }
-#slot::slotted([colspan="6"]) { grid-column-end: span 6; }
-#slot::slotted([colspan="7"]) { grid-column-end: span 7; }
-#slot::slotted([colspan="8"]) { grid-column-end: span 8; }
-#slot::slotted([colspan="9"]) { grid-column-end: span 9; }
-#slot::slotted([colspan="10"]) { grid-column-end: span 10; }
-#slot::slotted([colspan="11"]) { grid-column-end: span 11; }
-#slot::slotted([colspan="12"]) { grid-column-end: span 12; }

package/components/Progress.css

@@ -1,74 +0,0 @@
-/* https://m3.material.io/components/progress-indicators/specs */
-
-:host {
-  --mdw-bg: var(--mdw-color__surface-variant);
-  --mdw-ink: var(--mdw-color__primary);
-  --mdw-progress__opacity__duration: 500ms;
-  position: relative;
-
-  display: inline-block;
-  overflow: hidden;
-
-  min-block-size: 4px;
-  inline-size: 100%;
-
-  opacity: 1;
-
-  background-color: rgb(var(--mdw-bg));
-  color: rgb(var(--mdw-ink));
-
-  transition: opacity 500ms 275ms;
-}
-
-:host([auto-hide]) {
-  will-change: opacity;
-}
-
-:host([auto-hide][value="100"]) {
-  opacity:0;
-
-  transition: opacity 1s 1s;
-}
-
-#determinate {
-  --previous: 0;
-  --value: 0;
-}
-
-#progress {
-  position: absolute;
-  inset: 0;
-
-  box-sizing: border-box;
-  block-size: 100%;
-  inline-size: 100%;
-  border: none; /* FireFox */
-
-  -moz-appearance: none;
-  appearance: none;
-
-  opacity:0;
-  transform: scaleX(var(--value, 0));
-  transform-origin: 0 0;
-
-  background-color: currentColor;
-  color: inherit;
-
-  transition: transform 275ms, opacity var(--mdw-progress__opacity__duration);
-  will-change: transform, opacity;
-}
-
-#progress::-webkit-progress-bar {
-  display: none;
-}
-
-#progress::-moz-progress-bar  {
-  display: none; /* Doesn't always work */
-
-  block-size: 0;
-}
-
-#progress[value] {
-  opacity:1;
-  transform: scaleX(var(--value, 0));
-}

package/components/ProgressCircle.css

@@ -1,226 +0,0 @@
-/** https://github.com/material-components/material-components-android/blob/ed77ab36ccac98df24e55060d58406c5981a9062/lib/java/com/google/android/material/progressindicator/CircularIndeterminateAnimatorDelegate.java */
-
-:host {
-  --mdw-progress__circle__timing: cubic-bezier(0.4, 0.0, 0.2, 1);
-  --mdw-progress__circle__margin: 4px;
-  --mdw-progress__circle__duration: 5400ms;
-  --mdw-progress__circle__duration__expand: 667ms;
-  --mdw-progress__circle__duration__collapse: 667ms;
-  --mdw-progress__circle__duration__fade-in: 333ms;
-  --mdw-progress__circle__duration__complete-end: 333ms;
-}
-
-@media (prefers-reduced-motion) {
-  :host {
-    --mdw-progress__circle__duration: 54000ms;
-  }
-}
-
-#circle {
-  --startA: min(0.5, var(--previous));
-  --endA: min(0.5, var(--value));
-  --travelA: max(
-      calc(var(--startA) - var(--endA)),
-      calc(var(--endA) - var(--startA))
-    );
-  --delayA: max(0, calc(var(--previous) - 0.5));
-  --startB: max(0, calc(var(--previous) - 0.5));
-  --endB: max(0, calc(var(--value) - 0.5));
-  --travelB: max(
-      calc(var(--startB) - var(--endB)),
-      calc(var(--endB) - var(--startB))
-    );
-  --delayB: max(0, 0.5 - calc(var(--previous)));
-
-  position: absolute;
-  inset: 0;
-}
-
-:host([circle]) {
-  block-size: 48px;
-  inline-size: 48px;
-}
-
-:host([circle]:not([color])) {
-  background-color: transparent;
-}
-
-#progress[circle] {
-  visibility: hidden;
-}
-
-.semi {
-  position: absolute;
-  inset: var(--mdw-progress__circle__margin);
-
-  overflow: hidden;
-
-  box-sizing: border-box;
-}
-
-#semi1 {
-  inset-inline-start: 50%;
-}
-
-#semi2 {
-  inset-inline-end: 50%;
-}
-
-.semi::after {
-  content: "";
-
-  position: absolute;
-  inset: 0;
-
-  box-sizing: border-box;
-  border: solid currentcolor 4px;
-
-  transform: rotate(var(--rotation));
-
-  background-color: transparent;
-  border-radius: 50%;
-
-  transition: transform 400ms;
-  transition-timing-function: linear;
-}
-
-#semi1::after {
-  --rotation: min(180deg, calc(var(--value) * 360deg));
-  inset-inline-start: -100%;
-
-  clip-path: inset(0 50% 0 0);
-
-  transition-delay: calc(var(--delayA) * var(--mdw-progress__circle__duration__expand));
-  transition-duration: calc(var(--travelA) * var(--mdw-progress__circle__duration__expand));
-}
-
-#semi2::after {
-  --rotation: max(0deg, calc(var(--value) * 360deg - 180deg));
-  inset-inline-end: -100%;
-
-  clip-path: inset(0 0 0 50%);
-
-  transition-delay: calc(var(--delayB) * var(--mdw-progress__circle__duration__expand));
-  transition-duration: calc(var(--travelB) * var(--mdw-progress__circle__duration__expand));
-}
-
-#indeterminate-circle {
-  position: absolute;
-  inset: 0;
-
-  display: block;
-
-  animation: rotate-cw calc(var(--mdw-progress__circle__duration) / 4) linear infinite;
-}
-
-.arc {
-  position: absolute;
-  inset: var(--mdw-progress__circle__margin);
-
-  overflow: hidden;
-
-  box-sizing: border-box;
-
-  animation: rotate-jump var(--mdw-progress__circle__duration) steps(1,end) infinite;
-}
-
-.arc::after {
-  content: "";
-
-  position: absolute;
-  inset: 0;
-
-  box-sizing: border-box;
-  border: solid currentcolor 4px;
-
-  background-color: transparent;
-  border-radius: 50%;
-
-  animation: grow-shrink calc(var(--mdw-progress__circle__duration) / 4) var(--mdw-progress__circle__timing) infinite;
-}
-
-#arc2 {
-  inset-block-end: 50%;
-  inset-inline-start: 50%;
-
-  transform-origin: 0 100%;
-}
-
-#arc3 {
-  inset-block-start: 50%;
-  inset-inline-end: 50%;
-
-  transform-origin: 100% 0;
-}
-
-#arc4 {
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-
-  transform-origin: 0 0;
-}
-
-#arc2:after {
-  inset-block-end: -100%;
-  inset-inline-start: -100%;
-
-  clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 100% 50%, 100% 100%, 0% 100%);
-}
-
-#arc3:after {
-  inset-block-start: -100%;
-  inset-inline-end: -100%;
-
-  clip-path: inset(0 50% 50% 0);
-}
-
-#arc4:after {
-  inset-block-start: -100%;
-  inset-inline-start: -100%;
-
-  clip-path: inset(0 50% 0 0);
-}
-
-@keyframes rotate-cw {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes rotate-jump {
-  0% { transform: scaleX(1) rotate(0deg); }
-
-  12.5% { transform: scaleX(-1) rotate(-270deg); }
-
-  25% { transform: scaleX(1) rotate(270deg); }
-
-  37.5% {transform: scaleX(-1) rotate(-180deg);}
-
-  50% { transform: scaleX(1) rotate(180deg); }
-
-  62.5% { transform: scaleX(-1) rotate(-90deg); }
-
-  75% { transform: scaleX(1) rotate(90deg); }
-
-  87.5% { transform: scaleX(-1) rotate(0deg); }
-
-  to { transform: scaleX(1) rotate(0deg); }
-}
-
-@keyframes grow-shrink {
-  from {
-    transform: rotate(calc(0.01 * 360deg));
-  }
-
-  50% {
-    transform: rotate(calc(0.73 * 360deg));
-  }
-
-  to {
-    transform: rotate(calc(0.01 * 360deg));
-  }
-}