@twreporter/react-typescript-components 0.1.0-beta.6 → 0.1.0-beta.8

package/lib/styles.css

@@ -5,6 +5,7 @@
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-serif: "source-han-serif-tc", serif;
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-gray-100: #f1f1f1;
@@ -13,15 +14,29 @@
     --color-gray-400: #bbbbbb;
     --color-gray-500: #9c9c9c;
     --color-gray-600: #808080;
+    --color-gray-700: #666666;
     --color-gray-800: #404040;
     --spacing: 0.25rem;
+    --font-weight-normal: 400;
     --font-weight-bold: 700;
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --color-brand-heavy: #c40d23;
+    --color-brand-dark: #9b051e;
+    --color-photo-dark: #052142;
     --color-supportive-faded: #f0d5be;
     --color-supportive-pastel: #e3be98;
     --color-gray-white: #ffffff;
+    --color-gray-black: #000000;
+    --color-opacity-white-02: rgba(255, 255, 255, 0.2);
+    --color-opacity-white-05: rgba(255, 255, 255, 0.5);
+    --color-opacity-black-02: rgba(0, 0, 0, 0.2);
     --font-title: "merriweather", "source-han-serif-tc", serif;
     --font-default: "Roboto Slab", "Noto Sans TC", sans-serif, "Tauhu Oo";
   }
@@ -172,15 +187,48 @@
   }
 }
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
+  .sticky {
+    position: sticky;
+  }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+  .z-1 {
+    z-index: 1;
+  }
+  .z-2 {
+    z-index: 2;
+  }
+  .z-3 {
+    z-index: 3;
+  }
+  .z-4 {
+    z-index: 4;
+  }
+  .z-10 {
+    z-index: 10;
+  }
   .m-0 {
     margin: calc(var(--spacing) * 0);
   }
+  .mx-auto {
+    margin-inline: auto;
+  }
   .mt-\[0px\] {
     margin-top: 0px;
   }
@@ -190,18 +238,53 @@
   .mr-\[4px\] {
     margin-right: 4px;
   }
+  .mr-\[16px\] {
+    margin-right: 16px;
+  }
   .mr-\[24px\] {
     margin-right: 24px;
   }
+  .ml-0 {
+    margin-left: calc(var(--spacing) * 0);
+  }
   .ml-\[4px\] {
     margin-left: 4px;
   }
+  .ml-\[24px\] {
+    margin-left: 24px;
+  }
   .box-border {
     box-sizing: border-box;
   }
+  .scrollbar {
+    &::-webkit-scrollbar-track {
+      background-color: var(--scrollbar-track);
+      border-radius: var(--scrollbar-track-radius);
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar-thumb);
+      border-radius: var(--scrollbar-thumb-radius);
+    }
+    &::-webkit-scrollbar-corner {
+      background-color: var(--scrollbar-corner);
+      border-radius: var(--scrollbar-corner-radius);
+    }
+    @supports (-moz-appearance:none) {
+      scrollbar-width: auto;
+      scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
+    }
+    &::-webkit-scrollbar {
+      display: block;
+      width: var(--scrollbar-width, 16px);
+      height: var(--scrollbar-height, 16px);
+    }
+  }
   .flex {
     display: flex;
   }
+  .hidden {
+    display: none;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -213,18 +296,79 @@
     width: 24px;
     height: 24px;
   }
+  .h-0 {
+    height: calc(var(--spacing) * 0);
+  }
   .h-\[1px\] {
     height: 1px;
   }
+  .h-\[21px\] {
+    height: 21px;
+  }
+  .h-\[24px\] {
+    height: 24px;
+  }
+  .h-\[32px\] {
+    height: 32px;
+  }
+  .h-\[40px\] {
+    height: 40px;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .h-screen {
+    height: 100vh;
+  }
+  .max-h-0 {
+    max-height: calc(var(--spacing) * 0);
+  }
+  .max-h-\[300px\] {
+    max-height: 300px;
+  }
+  .w-0 {
+    width: calc(var(--spacing) * 0);
+  }
+  .w-\[24px\] {
+    width: 24px;
+  }
+  .w-fit {
+    width: fit-content;
+  }
   .w-full {
     width: 100%;
   }
+  .w-screen {
+    width: 100vw;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .-translate-x-\[24px\] {
+    --tw-translate-x: calc(24px * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-0 {
+    --tw-translate-x: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-y-full {
+    --tw-translate-y: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-0 {
+    --tw-translate-y: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .cursor-default {
     cursor: default;
   }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -246,12 +390,33 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .gap-\[16px\] {
     gap: 16px;
   }
+  .gap-\[24px\] {
+    gap: 24px;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-scroll {
+    overflow: scroll;
+  }
   .overflow-x-scroll {
     overflow-x: scroll;
   }
+  .overscroll-contain {
+    overscroll-behavior: contain;
+  }
+  .rounded-\[20px\] {
+    border-radius: 20px;
+  }
+  .rounded-\[40px\] {
+    border-radius: 40px;
+  }
   .rounded-\[50\%\] {
     border-radius: 50%;
   }
@@ -259,31 +424,148 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-\[1\.5px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1.5px;
+  }
+  .border-t-\[1px\] {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-l-\[1px\] {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
   .border-solid {
     --tw-border-style: solid;
     border-style: solid;
   }
+  .border-brand-heavy {
+    border-color: var(--color-brand-heavy);
+  }
+  .border-gray-300 {
+    border-color: var(--color-gray-300);
+  }
   .border-gray-400 {
     border-color: var(--color-gray-400);
   }
+  .border-gray-500 {
+    border-color: var(--color-gray-500);
+  }
+  .border-gray-800 {
+    border-color: var(--color-gray-800);
+  }
+  .border-gray-white {
+    border-color: var(--color-gray-white);
+  }
+  .border-supportive-faded {
+    border-color: var(--color-supportive-faded);
+  }
   .border-t-gray-600 {
     border-top-color: var(--color-gray-600);
   }
+  .bg-brand-heavy {
+    background-color: var(--color-brand-heavy);
+  }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
   .bg-gray-300 {
     background-color: var(--color-gray-300);
   }
+  .bg-gray-400 {
+    background-color: var(--color-gray-400);
+  }
+  .bg-gray-500 {
+    background-color: var(--color-gray-500);
+  }
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
+  .bg-gray-black {
+    background-color: var(--color-gray-black);
+  }
+  .bg-gray-white {
+    background-color: var(--color-gray-white);
+  }
+  .bg-opacity-black-02 {
+    background-color: var(--color-opacity-black-02);
+  }
+  .bg-photo-dark {
+    background-color: var(--color-photo-dark);
+  }
+  .bg-supportive-faded {
+    background-color: var(--color-supportive-faded);
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
   .\[mask-image\:linear-gradient\(to_left\,rgba\(241\,241\,241\,0\)\,\#f1f1f1_48px\)\] {
     mask-image: linear-gradient(to left,rgba(241,241,241,0),#f1f1f1 48px);
   }
+  .mask-cover {
+    mask-size: cover;
+  }
+  .px-\[12px\] {
+    padding-inline: 12px;
+  }
+  .px-\[16px\] {
+    padding-inline: 16px;
+  }
+  .px-\[24px\] {
+    padding-inline: 24px;
+  }
+  .px-\[32px\] {
+    padding-inline: 32px;
+  }
+  .py-\[4px\] {
+    padding-block: 4px;
+  }
+  .py-\[8px\] {
+    padding-block: 8px;
+  }
   .py-\[16px\] {
     padding-block: 16px;
   }
+  .py-\[24px\] {
+    padding-block: 24px;
+  }
+  .pt-\[16px\] {
+    padding-top: 16px;
+  }
+  .pt-\[24px\] {
+    padding-top: 24px;
+  }
+  .pt-\[40px\] {
+    padding-top: 40px;
+  }
+  .pr-\[32px\] {
+    padding-right: 32px;
+  }
+  .pb-\[8px\] {
+    padding-bottom: 8px;
+  }
+  .pb-\[16px\] {
+    padding-bottom: 16px;
+  }
+  .pb-\[32px\] {
+    padding-bottom: 32px;
+  }
+  .pb-\[calc\(48px\+48px\)\] {
+    padding-bottom: calc(48px + 48px);
+  }
+  .pl-\[32px\] {
+    padding-left: 32px;
+  }
+  .pl-\[48px\] {
+    padding-left: 48px;
+  }
   .font-default {
     font-family: var(--font-default);
   }
+  .font-serif {
+    font-family: var(--font-serif);
+  }
   .font-title {
     font-family: var(--font-title);
   }
@@ -326,12 +608,16 @@
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .text-brand-dark {
+    color: var(--color-brand-dark);
+  }
   .text-brand-heavy {
     color: var(--color-brand-heavy);
   }
-  .text-gray-100 {
-    color: var(--color-gray-100);
-  }
   .text-gray-200 {
     color: var(--color-gray-200);
   }
@@ -347,29 +633,210 @@
   .text-gray-600 {
     color: var(--color-gray-600);
   }
+  .text-gray-700 {
+    color: var(--color-gray-700);
+  }
   .text-gray-800 {
     color: var(--color-gray-800);
   }
+  .text-gray-black {
+    color: var(--color-gray-black);
+  }
   .text-gray-white {
     color: var(--color-gray-white);
   }
+  .text-photo-dark {
+    color: var(--color-photo-dark);
+  }
   .text-supportive-faded {
     color: var(--color-supportive-faded);
   }
+  .text-supportive-pastel {
+    color: var(--color-supportive-pastel);
+  }
   .opacity-0 {
     opacity: 0%;
   }
   .opacity-100 {
     opacity: 100%;
   }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .delay-0 {
+    transition-delay: 0ms;
+  }
+  .delay-350 {
+    transition-delay: 350ms;
+  }
+  .delay-\[150ms\] {
+    transition-delay: 150ms;
+  }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .duration-\[50ms\] {
+    --tw-duration: 50ms;
+    transition-duration: 50ms;
+  }
+  .duration-\[200ms\] {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
+  .ease-in {
+    --tw-ease: var(--ease-in);
+    transition-timing-function: var(--ease-in);
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .ease-linear {
+    --tw-ease: linear;
+    transition-timing-function: linear;
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .\[-webkit-mask-image\:linear-gradient\(to_left\,rgba\(241\,241\,241\,0\)\,\#f1f1f1_48px\)\] {
     -webkit-mask-image: linear-gradient(to left,rgba(241,241,241,0),#f1f1f1 48px);
   }
+  .scrollbar-thumb-opacity-black-02 {
+    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
+  }
+  .scrollbar-thumb-opacity-white-08 {
+    --scrollbar-thumb: rgba(255, 255, 255, 0.8);
+  }
+  .scrollbar-thumb-rounded-xs {
+    --scrollbar-thumb-radius: 0.125rem;
+  }
+  .scrollbar-w-1 {
+    --scrollbar-width: 0.25rem;
+  }
   .last\:mr-0 {
     &:last-child {
       margin-right: calc(var(--spacing) * 0);
     }
   }
+  .hover\:border-brand-dark {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-brand-dark);
+      }
+    }
+  }
+  .hover\:border-gray-200 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-gray-200);
+      }
+    }
+  }
+  .hover\:border-gray-400 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-gray-400);
+      }
+    }
+  }
+  .hover\:border-gray-500 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-gray-500);
+      }
+    }
+  }
+  .hover\:border-gray-black {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-gray-black);
+      }
+    }
+  }
+  .hover\:border-supportive-pastel {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-supportive-pastel);
+      }
+    }
+  }
+  .hover\:bg-brand-dark {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-brand-dark);
+      }
+    }
+  }
+  .hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-100);
+      }
+    }
+  }
+  .hover\:bg-gray-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-200);
+      }
+    }
+  }
+  .hover\:bg-gray-400 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-400);
+      }
+    }
+  }
+  .hover\:bg-gray-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-500);
+      }
+    }
+  }
+  .hover\:bg-gray-black {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-black);
+      }
+    }
+  }
+  .hover\:bg-opacity-white-02 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-opacity-white-02);
+      }
+    }
+  }
+  .hover\:bg-supportive-pastel {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-supportive-pastel);
+      }
+    }
+  }
+  .hover\:text-brand-dark {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-brand-dark);
+      }
+    }
+  }
   .hover\:text-brand-heavy {
     &:hover {
       @media (hover: hover) {
@@ -398,6 +865,34 @@
       }
     }
   }
+  .hover\:text-gray-600 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-600);
+      }
+    }
+  }
+  .hover\:text-gray-700 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-700);
+      }
+    }
+  }
+  .hover\:text-gray-800 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-800);
+      }
+    }
+  }
+  .hover\:text-gray-black {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-black);
+      }
+    }
+  }
   .hover\:text-gray-white {
     &:hover {
       @media (hover: hover) {
@@ -405,6 +900,13 @@
       }
     }
   }
+  .hover\:text-photo-dark {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-photo-dark);
+      }
+    }
+  }
   .hover\:text-supportive-pastel {
     &:hover {
       @media (hover: hover) {
@@ -412,6 +914,74 @@
       }
     }
   }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .active\:bg-gray-200 {
+    &:active {
+      background-color: var(--color-gray-200);
+    }
+  }
+  .active\:bg-opacity-white-05 {
+    &:active {
+      background-color: var(--color-opacity-white-05);
+    }
+  }
+  .active\:text-gray-400 {
+    &:active {
+      color: var(--color-gray-400);
+    }
+  }
+  .active\:text-gray-800 {
+    &:active {
+      color: var(--color-gray-800);
+    }
+  }
+  .tablet\:-left-\[320px\] {
+    @media (width >= 768px) {
+      left: calc(320px * -1);
+    }
+  }
+  .tablet\:flex {
+    @media (width >= 768px) {
+      display: flex;
+    }
+  }
+  .tablet\:hidden {
+    @media (width >= 768px) {
+      display: none;
+    }
+  }
+  .tablet\:max-h-screen {
+    @media (width >= 768px) {
+      max-height: 100vh;
+    }
+  }
+  .tablet\:w-\[320px\] {
+    @media (width >= 768px) {
+      width: 320px;
+    }
+  }
+  .tablet\:translate-x-0 {
+    @media (width >= 768px) {
+      --tw-translate-x: calc(var(--spacing) * 0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .tablet\:translate-x-\[320px\] {
+    @media (width >= 768px) {
+      --tw-translate-x: 320px;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .tablet\:px-\[32px\] {
+    @media (width >= 768px) {
+      padding-inline: 32px;
+    }
+  }
   .tablet\:text-\[16px\] {
     @media (width >= 768px) {
       font-size: 16px;
@@ -442,6 +1012,16 @@
       font-size: 36px;
     }
   }
+  .tablet\:opacity-100 {
+    @media (width >= 768px) {
+      opacity: 100%;
+    }
+  }
+  .desktop\:-left-\[280px\] {
+    @media (width >= 1024px) {
+      left: calc(280px * -1);
+    }
+  }
   .desktop\:mt-\[0px\] {
     @media (width >= 1024px) {
       margin-top: 0px;
@@ -452,6 +1032,394 @@
       margin-top: 16px;
     }
   }
+  .desktop\:flex {
+    @media (width >= 1024px) {
+      display: flex;
+    }
+  }
+  .desktop\:hidden {
+    @media (width >= 1024px) {
+      display: none;
+    }
+  }
+  .desktop\:w-\[280px\] {
+    @media (width >= 1024px) {
+      width: 280px;
+    }
+  }
+  .desktop\:translate-x-0 {
+    @media (width >= 1024px) {
+      --tw-translate-x: calc(var(--spacing) * 0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .desktop\:translate-x-\[280px\] {
+    @media (width >= 1024px) {
+      --tw-translate-x: 280px;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .desktop\:flex-col {
+    @media (width >= 1024px) {
+      flex-direction: column;
+    }
+  }
+  .desktop\:px-\[48px\] {
+    @media (width >= 1024px) {
+      padding-inline: 48px;
+    }
+  }
+  .desktop\:opacity-100 {
+    @media (width >= 1024px) {
+      opacity: 100%;
+    }
+  }
+  .hd\:w-\[1280px\] {
+    @media (width >= 1440px) {
+      width: 1280px;
+    }
+  }
+  .hd\:px-0 {
+    @media (width >= 1440px) {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .\[\&\>a\]\:no-underline {
+    &>a {
+      text-decoration-line: none;
+    }
+  }
+  .\[\&\>img\]\:h-\[24px\] {
+    &>img {
+      height: 24px;
+    }
+  }
+  .\[\&\>img\]\:w-\[24px\] {
+    &>img {
+      width: 24px;
+    }
+  }
+  .\[\&\>svg\]\:mr-\[4px\] {
+    &>svg {
+      margin-right: 4px;
+    }
+  }
+  .\[\&\>svg\]\:h-\[18px\] {
+    &>svg {
+      height: 18px;
+    }
+  }
+  .\[\&\>svg\]\:h-\[24px\] {
+    &>svg {
+      height: 24px;
+    }
+  }
+  .\[\&\>svg\]\:h-\[32px\] {
+    &>svg {
+      height: 32px;
+    }
+  }
+  .\[\&\>svg\]\:w-\[18px\] {
+    &>svg {
+      width: 18px;
+    }
+  }
+  .\[\&\>svg\]\:w-\[24px\] {
+    &>svg {
+      width: 24px;
+    }
+  }
+  .\[\&\>svg\]\:w-\[32px\] {
+    &>svg {
+      width: 32px;
+    }
+  }
+  .\[\&\>svg\]\:-rotate-\[180deg\] {
+    &>svg {
+      rotate: calc(180deg * -1);
+    }
+  }
+  .\[\&\>svg\]\:rotate-\[0deg\] {
+    &>svg {
+      rotate: 0deg;
+    }
+  }
+  .\[\&\>svg\]\:bg-brand-heavy {
+    &>svg {
+      background-color: var(--color-brand-heavy);
+    }
+  }
+  .\[\&\>svg\]\:bg-gray-300 {
+    &>svg {
+      background-color: var(--color-gray-300);
+    }
+  }
+  .\[\&\>svg\]\:bg-gray-400 {
+    &>svg {
+      background-color: var(--color-gray-400);
+    }
+  }
+  .\[\&\>svg\]\:bg-gray-500 {
+    &>svg {
+      background-color: var(--color-gray-500);
+    }
+  }
+  .\[\&\>svg\]\:bg-gray-600 {
+    &>svg {
+      background-color: var(--color-gray-600);
+    }
+  }
+  .\[\&\>svg\]\:bg-gray-700 {
+    &>svg {
+      background-color: var(--color-gray-700);
+    }
+  }
+  .\[\&\>svg\]\:bg-gray-800 {
+    &>svg {
+      background-color: var(--color-gray-800);
+    }
+  }
+  .\[\&\>svg\]\:bg-gray-white {
+    &>svg {
+      background-color: var(--color-gray-white);
+    }
+  }
+  .\[\&\>svg\]\:bg-photo-dark {
+    &>svg {
+      background-color: var(--color-photo-dark);
+    }
+  }
+  .\[\&\>svg\]\:bg-supportive-faded {
+    &>svg {
+      background-color: var(--color-supportive-faded);
+    }
+  }
+  .\[\&\>svg\]\:bg-supportive-pastel {
+    &>svg {
+      background-color: var(--color-supportive-pastel);
+    }
+  }
+  .\[\&\>svg\]\:transition-all {
+    &>svg {
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .\[\&\>svg\]\:duration-300 {
+    &>svg {
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+    }
+  }
+  .\[\&\>svg\]\:hover\:bg-brand-heavy {
+    &>svg {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-brand-heavy);
+        }
+      }
+    }
+  }
+  .\[\&\>svg\]\:hover\:bg-gray-200 {
+    &>svg {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-200);
+        }
+      }
+    }
+  }
+  .\[\&\>svg\]\:hover\:bg-gray-600 {
+    &>svg {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-600);
+        }
+      }
+    }
+  }
+  .\[\&\>svg\]\:hover\:bg-gray-white {
+    &>svg {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-white);
+        }
+      }
+    }
+  }
+  .\[\&\>svg\]\:hover\:bg-supportive-pastel {
+    &>svg {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-supportive-pastel);
+        }
+      }
+    }
+  }
+  .hover\:\[\&\>svg\]\:bg-brand-dark {
+    &:hover {
+      @media (hover: hover) {
+        &>svg {
+          background-color: var(--color-brand-dark);
+        }
+      }
+    }
+  }
+  .hover\:\[\&\>svg\]\:bg-gray-200 {
+    &:hover {
+      @media (hover: hover) {
+        &>svg {
+          background-color: var(--color-gray-200);
+        }
+      }
+    }
+  }
+  .hover\:\[\&\>svg\]\:bg-gray-400 {
+    &:hover {
+      @media (hover: hover) {
+        &>svg {
+          background-color: var(--color-gray-400);
+        }
+      }
+    }
+  }
+  .hover\:\[\&\>svg\]\:bg-gray-500 {
+    &:hover {
+      @media (hover: hover) {
+        &>svg {
+          background-color: var(--color-gray-500);
+        }
+      }
+    }
+  }
+  .hover\:\[\&\>svg\]\:bg-gray-700 {
+    &:hover {
+      @media (hover: hover) {
+        &>svg {
+          background-color: var(--color-gray-700);
+        }
+      }
+    }
+  }
+  .hover\:\[\&\>svg\]\:bg-gray-800 {
+    &:hover {
+      @media (hover: hover) {
+        &>svg {
+          background-color: var(--color-gray-800);
+        }
+      }
+    }
+  }
+  .hover\:\[\&\>svg\]\:bg-gray-black {
+    &:hover {
+      @media (hover: hover) {
+        &>svg {
+          background-color: var(--color-gray-black);
+        }
+      }
+    }
+  }
+  .hover\:\[\&\>svg\]\:bg-gray-white {
+    &:hover {
+      @media (hover: hover) {
+        &>svg {
+          background-color: var(--color-gray-white);
+        }
+      }
+    }
+  }
+  .hover\:\[\&\>svg\]\:bg-photo-dark {
+    &:hover {
+      @media (hover: hover) {
+        &>svg {
+          background-color: var(--color-photo-dark);
+        }
+      }
+    }
+  }
+  .hover\:\[\&\>svg\]\:bg-supportive-pastel {
+    &:hover {
+      @media (hover: hover) {
+        &>svg {
+          background-color: var(--color-supportive-pastel);
+        }
+      }
+    }
+  }
+  .active\:\[\&\>svg\]\:bg-gray-400 {
+    &:active {
+      &>svg {
+        background-color: var(--color-gray-400);
+      }
+    }
+  }
+  .active\:\[\&\>svg\]\:bg-gray-800 {
+    &:active {
+      &>svg {
+        background-color: var(--color-gray-800);
+      }
+    }
+  }
+  .\[\&\>svg\]\:tablet\:h-\[24px\] {
+    &>svg {
+      @media (width >= 768px) {
+        height: 24px;
+      }
+    }
+  }
+  .\[\&\>svg\]\:tablet\:w-\[24px\] {
+    &>svg {
+      @media (width >= 768px) {
+        width: 24px;
+      }
+    }
+  }
+  .desktop\:\[\&\>svg\]\:hover\:bg-brand-heavy {
+    @media (width >= 1024px) {
+      &>svg {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-brand-heavy);
+          }
+        }
+      }
+    }
+  }
+  .desktop\:\[\&\>svg\]\:hover\:bg-gray-800 {
+    @media (width >= 1024px) {
+      &>svg {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-gray-800);
+          }
+        }
+      }
+    }
+  }
+}
+@layer base {
+  * {
+    @supports (-moz-appearance:none) {
+      scrollbar-color: initial;
+      scrollbar-width: initial;
+    }
+  }
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
 }
 @property --tw-border-style {
   syntax: "*";
@@ -466,12 +1434,30 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
     }
   }
 }