@leaflink/stash 52.0.3 → 53.1.0

package/styles/theme.css

@@ -0,0 +1,1033 @@
+/*
+ * ALWAYS include these color related classes (below). This allows us to dynamically
+ * create color classes based on a color prop in our components instead of
+ * listing the full class name like is encouraged in the docs.
+ * https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names
+ *
+ * Note: If any stash components change which color classes they dynamically build,
+ * this needs to change. Keep this list as small as possible.
+ *
+ * Note: Patterns can only match against base utility names like /bg-red-.+/, and won't match if the pattern
+ * includes a variant modifier like /hover:bg-red-.+/.
+ */
+@source inline("{bg,text,border}-{purple,royal,blue,seafoam,teal,green,yellow,orange,red,ice}-{100,200,500,700,900}");
+
+/* Stroke and text colors for illustrations */
+@source inline("stroke-{purple,royal,blue,seafoam,teal,green,yellow,orange,red,ice}-500");
+@source inline("text-{purple,royal,blue,seafoam,teal,green,yellow,orange,red,ice}-400");
+
+/* Other classes that are used dynamically (ex: `text-${isDark ? 'white' : 'black'}`) */
+@source inline("bg-ice-200 bg-white bg-black text-white text-black border-white border-black");
+
+/* Conflicts with our own custom container classes */
+@source not inline("container");
+
+:root {
+  --grid-gutter: 12px;
+
+  --line-height-base: calc(24 / 16);
+  --line-height-body: calc(20 / 14);
+  --line-height-small: calc(16 / 12);
+  --line-height-button: calc(24 / 14);
+
+  /* The tooltips position relative to the toggle element */
+  --tooltip-position: calc(100% + --spacing(3));
+
+  /* Centers arrow horizontally or vertically along tooltip on arrow's center */
+  --arrow-position-centered: calc(50% - --spacing(1.5));
+
+  @media (width >= theme(--breakpoint-lg)) {
+    --grid-gutter: 24px;
+  }
+
+  /* Deprecated colors */
+  --color-blue-hover: rgb(0 114 240 / 74.9%);
+  --color-red-hover: rgb(228 0 43 / 74.9%);
+  --color-ice-700-hover: rgb(118 121 127 / 11.8%);
+  --color-white-hover: rgb(255 255 255 / 11.8%);
+  --button-secondary-blue-hover: rgb(0 114 240 / 11.8%);
+  --button-secondary-red-hover: rgb(228 0 43 / 11.8%);
+}
+
+/**
+ * Stash Custom Theme
+ *
+ * Custom theme variables that extend/override Tailwind's defaults.
+ * Per Tailwind v4 docs, @import "tailwindcss" must come first for @theme overrides to work.
+ * https://tailwindcss.com/docs/theme
+ */
+@theme {
+  --breakpoint-md: 640px;
+  --breakpoint-lg: 961px;
+  --breakpoint-xl: 1321px;
+
+  --font-mono: monospace;
+  --font-sans: sofia, sans-serif;
+  --font-sofia: sofia, sans-serif; /* @deprecated - use font-sans instead! */
+
+  --color-white: #fff;
+  --color-black: #000;
+  --color-transparent: transparent;
+  --color-inherit: inherit;
+  --color-current: currentcolor;
+
+  --color-purple-900: #06040F;
+  --color-purple-800: #0C091E;
+  --color-purple-700: #120D2D;
+  --color-purple-600: #18123C;
+  --color-purple-500: #1E164B;
+  --color-purple-400: #4B456F;
+  --color-purple-300: #787393;
+  --color-purple-200: #A5A2B7;
+  --color-purple-100: #D2D0DB;
+
+  --color-royal-900: #0A0C24;
+  --color-royal-800: #131747;
+  --color-royal-700: #1D236B;
+  --color-royal-600: #262E8E;
+  --color-royal-500: #303AB2;
+  --color-royal-400: #5961C1;
+  --color-royal-300: #8389D1;
+  --color-royal-200: #ACB0E0;
+  --color-royal-100: #D6D8F0;
+
+  --color-blue-900: #001730;
+  --color-blue-800: #002E60;
+  --color-blue-700: #004490;
+  --color-blue-600: #005BC0;
+  --color-blue-500: #0072F0;
+  --color-blue-400: #338EF3;
+  --color-blue-300: #66AAF6;
+  --color-blue-200: #99C7F9;
+  --color-blue-100: #CCE3FC;
+
+  --color-teal-900: #002528;
+  --color-teal-800: #004B50;
+  --color-teal-700: #017078;
+  --color-teal-600: #0196A0;
+  --color-teal-500: #01BBC8;
+  --color-teal-400: #34C9D3;
+  --color-teal-300: #67D6DE;
+  --color-teal-200: #99E4E9;
+  --color-teal-100: #CCF1F4;
+
+  --color-green-900: #062313;
+  --color-green-800: #0C4627;
+  --color-green-700: #11683A;
+  --color-green-600: #178B4E;
+  --color-green-500: #1DAE61;
+  --color-green-400: #4ABE81;
+  --color-green-300: #77CEA0;
+  --color-green-200: #A5DFC0;
+  --color-green-100: #D2EFDF;
+
+  --color-seafoam-900: #0C2C26;
+  --color-seafoam-800: #18584D;
+  --color-seafoam-700: #248373;
+  --color-seafoam-600: #30AF9A;
+  --color-seafoam-500: #3CDBC0;
+  --color-seafoam-400: #63E2CD;
+  --color-seafoam-300: #8AE9D9;
+  --color-seafoam-200: #B1F1E6;
+  --color-seafoam-100: #D8F8F2;
+
+  --color-yellow-900: #332A00;
+  --color-yellow-800: #650;
+  --color-yellow-700: #997F00;
+  --color-yellow-600: #CA0;
+  --color-yellow-500: #FFD400;
+  --color-yellow-400: #FD3;
+  --color-yellow-300: #FFE566;
+  --color-yellow-200: #FE9;
+  --color-yellow-100: #FFF6CC;
+
+  --color-orange-900: #331E07;
+  --color-orange-800: #663B0F;
+  --color-orange-700: #995916;
+  --color-orange-600: #CC761E;
+  --color-orange-500: #FF9425;
+  --color-orange-400: #FFA951;
+  --color-orange-300: #FFBF7C;
+  --color-orange-200: #FFD4A8;
+  --color-orange-100: #FFEAD3;
+
+  --color-red-900: #2E0009;
+  --color-red-800: #5B0011;
+  --color-red-700: #89001A;
+  --color-red-600: #B60022;
+  --color-red-500: #E4002B;
+  --color-red-400: #E93355;
+  --color-red-300: #EF6680;
+  --color-red-200: #F499AA;
+  --color-red-100: #FACCD5;
+
+  --color-ice-900: #27282A;
+  --color-ice-800: #4F5055;
+  --color-ice-700: #76797F;
+  --color-ice-600: #9EA1AA;
+  --color-ice-500: #C5C9D4;
+  --color-ice-400: #D1D4DD;
+  --color-ice-300: #DCDFE5;
+  --color-ice-200: #E8E9EE;
+  --color-ice-100: #F3F4F6;
+
+  --background-image-scroll-shadow: linear-gradient(0deg, rgb(197 201 212 / 35%), rgb(38 38 38 / 0%));
+
+  --spacing-gutter: var(--grid-gutter);
+
+  /* Modules or Images if necessary (Previously Shadow Low) */
+  --shadow-sm: 0px 2px 2px 0px rgb(38 38 38 / 5%), 0px 2px 6px 0px rgb(38 38 38 / 10%);
+
+  /* Cards Scroll Lock Modules like Global Nav or the Bulk Select Mobile Pattern */
+  --shadow-md: 0px 3px 3px 1px rgb(38 38 38 / 5%), 0px 3px 12px 1px rgb(38 38 38 / 10%);
+
+  /* TBD */
+  --shadow-lg: 0px 6px 6px 0px rgb(38 38 38 / 5%), 0px 6px 18px 2px rgb(38 38 38 / 10%), 0px 6px 18px 2px rgb(38 38 38 / 15%);
+
+  /* Floating UIs like the Zendesk Help center */
+  --shadow-xl: 0px 12px 12px 0px rgb(38 38 38 / 5%), 0px 12px 12px 2px rgb(38 38 38 / 10%), 0px 12px 24px 2px rgb(38 38 38 / 15%);
+
+  /* Dropdowns, Selects, Menus */
+  --shadow-2xl: 0px 18px 18px 4px rgb(38 38 38 / 5%), 0px 18px 18px 4px rgb(38 38 38 / 10%), 0px 18px 30px 0px rgb(38 38 38 / 15%);
+
+  /* Dialogs, Modals and any other Overlay types (Previously Shadow High) */
+  --shadow-3xl: 0px 24px 24px 0px rgb(38 38 38 / 5%), 0px 24px 24px 8px rgb(38 38 38 / 10%), 0px 24px 48px 8px rgb(38 38 38 / 15%);
+
+  --height-input: 2.25rem; /* 36px */
+  --height-logo: 1.375rem; /* 22px */
+  --height-topbar: 3.5rem; /* 56px */
+  --height-chip: 1.375rem; /* 22px */
+
+  --max-height-select-menu: 18.75rem; /* 300px - sharable with dropdown, date, etc. */
+
+  --min-width-input: 9rem; /* 144px */
+
+  --max-width-field: 18rem; /* 288px - standard width used for form field elements */
+  --max-width-initial: initial;
+  --max-width-container: 87.5rem; /* 1400px - max width used for page content */
+
+  --width-container: 87.5rem; /* 1400px */
+  --width-inline-edit: 8.75rem; /* 140px - standard width used for ll-inline-edit elements */
+  --width-inline-edit-small: 5.6rem; /* 90px - standard width used for smaller ll-inline-edit elements */
+  --width-sidebar: 17.5rem; /* 280px */
+  --width-select-menu: 5rem; /* 80px */
+
+  --z-index-n10: -10;
+  --z-index-n20: -20;
+  --z-index-n30: -30;
+  --z-index-behind: -1;
+  --z-index-content: 100; /* general content on the page */
+  --z-index-control: 200; /* for UI controls, widgets, buttons, etc. These are given one level higher priority */
+  --z-index-page: 300; /* applies to page-level blocks, ie. site-header, side-nav, etc */
+  --z-index-screen: 400; /* covers all "standard" things visible on the screen: page-level blocks, UI/control things, general content */
+  --z-index-modal: 1000; /* covers all things except dialogs, including other elements promoted along the z-axis. */
+  --z-index-dialog: 1001; /* covers all things, including other elements promoted along the z-axis. */
+
+  --animate-grow: grow 1s;
+  --animate-shake: shake 1s ease 0s 1 normal none running;
+  --animate-fade-in: fade-in 0.3s ease-out;
+  --animate-fade-out: fade-out 0.3s ease-in;
+
+  @keyframes grow {
+    0%, 100% {
+      transform: scale3d(1, 1, 1);
+    }
+
+    50% {
+      transform: scale3d(1.25, 1.25, 1.25);
+    }
+  }
+
+  @keyframes shake {
+    0%, 100% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    10%, 30%, 50%, 70%, 90% {
+      transform: translate3d(-10px, 0, 0);
+    }
+
+    20%, 40%, 60%, 80% {
+      transform: translate3d(10px, 0, 0);
+    }
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  --ease-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);
+  --ease-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
+  --ease-fast-in-fast-out: cubic-bezier(0.25, 0.8, 0.25, 1);
+  --ease-swing: cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+@layer components {
+  /**
+   * ll-grid is a legacy grid class that conflicts with tailwinds out of the box grid class.
+   * It's quite hard to replace it with a 1-1 swap, because there's so many default styles included in ll-grid, but it's
+   * also used in conjunction with other grid classes. For example:
+   *      <div class="ll-grid ll-grid-cols-4 md:ll-grid-cols-8 lg:ll-grid-cols-12">
+   *
+   * In this example, ll-grid has default grid-cols styles, but the dev is overriding those defaults. If we were to
+   * replace ll-grid with grid in a simple find/replace, we would HAVE to include
+   * `grid-cols-1 gap-x-gutter gap-y-6 md:grid-cols-12` as well, and then in examples like the one above,
+   * you'd have weird conflicts and specificity issues.
+   *
+   * Conclusion: So, for now,
+   * - `.ll-grid` & `.grid` will continue to exist in backwards-compat.css as is.
+   * - `.grid` will behave as expected and is a simple utility with no baked in defaults.
+   * - We're creating a custom .ll-grid class that will have the same styles but won't cause weird issues downstream.
+   *   In the future we can remove this class OR keep it around if we decide we want to keep a grid utility with
+   *   some baked in defaults.
+   */
+  .ll-grid {
+    @apply grid grid-cols-1 gap-x-gutter gap-y-6 md:grid-cols-12;
+
+    --deprecated: "WARNING: Use `grid` instead";
+  }
+
+  /**
+  * This is a custom .container class that conflicts with tailwinds out of the box container class.
+  * Placed here before tailwind utilities, and specifically not within @layer components, so that it is
+  * always included in the output css.
+  */
+  .container {
+    @apply max-w-container px-gutter;
+
+    margin: 0 auto;
+    position: relative;
+    width: 100%;
+  }
+
+  /* helpful class to show an emdash when an element like a table cell is empty */
+  .show-empty:empty::before {
+    content: "—";
+  }
+}
+
+/**
+ * General styles and/or reset css could go here.
+ */
+
+@layer base {
+  html {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    overflow-x: hidden;
+    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+    text-rendering: optimizelegibility;
+  }
+
+  body {
+    @apply leading-normal text-ice-700 bg-ice-100 font-normal text-sm font-sans;
+
+    min-height: 100vh;
+    position: relative;
+  }
+
+  *,
+  ::before,
+  ::after {
+    @apply border-0 border-solid border-ice-500;
+
+    background-repeat: no-repeat;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  ::-ms-clear,
+  ::-ms-reveal {
+    display: none;
+  }
+
+  h1 {
+    @apply text-2xl font-medium text-ice-900;
+    margin: 0.67em 0;
+  }
+
+  h2 {
+    @apply text-xl font-medium text-ice-900;
+  }
+
+  h3 {
+    @apply text-base font-medium text-ice-900;
+  }
+
+  h4 {
+    @apply text-sm font-medium text-ice-900;
+  }
+
+  h5,
+  h6 {
+    @apply text-ice-900;
+  }
+
+  .heading-jumbo {
+    @apply text-2xl font-medium text-ice-900;
+  }
+
+  @media (width >= theme(--breakpoint-md)) {
+    .heading-jumbo {
+      font-size: var(--text-5xl);
+    }
+  }
+
+  p {
+    margin-bottom: 0.875rem;
+  }
+
+  small {
+    @apply text-xs font-normal;
+  }
+
+  address {
+    font-style: normal;
+    line-height: --spacing(6);
+    white-space: pre-line;
+  }
+
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  pre,
+  code,
+  kbd,
+  samp {
+    font-family: monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /**
+   * Remove the gray background on active links in IE 10.
+   *
+   * Add LeafLink's base styles to fix issues on localhost
+   */
+  a, .link {
+    @apply text-blue-500;
+
+    background-color: transparent;
+    font-weight: 500;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    /* When users right click on a link to view it in a new tab, a noticeable focus state helps them
+    see which link they were interacting with so that they can continue where they left off. */
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /**
+   * 1. Undo the `border-style: none` from above so that our `border-{width}`
+   *    utilities have the expected effect. It is unnecessary since border-width
+   *    is 0 on all elements.
+   *
+   * 2. This helps to avoid unexpected alignment issues that you often run into
+   *    using the browser default of `display: inline`.
+   */
+  img {
+    border-style: solid; /* 1 */
+    display: block; /* 2 */
+  }
+
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    background-color: transparent;
+    color: inherit;
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+
+  button {
+    display: inline-block;
+    font-size: 0.875rem;
+    vertical-align: middle;
+  }
+
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    appearance: auto;
+    cursor: pointer;
+  }
+
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  /**
+   * Correct the padding in Firefox.
+   */
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  progress {
+    vertical-align: baseline;
+  }
+
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  [type="search"] {
+    appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  [type="search"]::-webkit-search-decoration {
+    appearance: none;
+  }
+
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  ::-webkit-file-upload-button {
+    appearance: auto; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  /**
+   * Add the correct display in all browsers.
+   */
+
+  details {
+    display: block;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  template {
+    display: none;
+  }
+
+  ul,
+  ol {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    &.bullets {
+      list-style-type: disc;
+      padding-left: --spacing(9);
+
+      li {
+        margin-bottom: --spacing(3);
+      }
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    max-width: 100%;
+    width: 100%;
+
+    td,
+    th {
+      border-top: 1px solid var(--color-ice-500);
+      padding: 0.766rem;
+    }
+
+    thead {
+      td,
+      th {
+        background-color: var(--color-ice-200);
+        border-bottom: 2px solid var(--color-ice-500);
+        border-top: none;
+        color: var(--color-ice-900);
+        font-weight: 500;
+        text-align: left;
+        user-select: none;
+        white-space: nowrap;
+      }
+    }
+
+    tbody {
+      td {
+        font-weight: 400;
+      }
+    }
+
+    tfoot {
+      tr {
+        td {
+          border: none;
+        }
+      }
+    }
+  }
+
+  /**
+   * Legacy button-grid class.
+   *
+   * Todo: Create ButtonGrid component with styles below and remove button grid styles from Button.vue
+   * https://leaflink.atlassian.net/browse/STASH-230
+   */
+  .button-grid {
+    display: flex;
+    grid-column-end: -1 !important;
+
+    > .button {
+      width: 50%;
+    }
+
+    > .button + .button {
+      margin-left: --spacing(6);
+    }
+
+    @media (width >= theme(--breakpoint-md)) {
+      display: inline-flex;
+
+      > .button {
+        width: auto;
+      }
+    }
+  }
+
+  .tooltip {
+    --offset: 0;
+
+    background: var(--color-ice-900);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 0 #0000, 0 0 #0000, 0 2px 2px 0 rgb(38 38 38 / 5%), 0 2px 6px 0 rgb(38 38 38 / 10%);
+    color: var(--color-white);
+    font-size: 0.75rem;
+    line-height: calc(16 / 12);
+    opacity: 0;
+    padding: --spacing(3);
+    pointer-events: none; /* Tooltips should disappear once the user hovers away */
+    position: absolute;
+    text-align: center;
+    transition: opacity 150ms var(--ease-swing), visibility 150ms var(--ease-swing);
+    visibility: hidden;
+    white-space: normal;
+    width: 148px;
+
+    &::after {
+      background-color: var(--color-ice-900);
+      border-radius: 0 2px 0 0;
+      clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
+      content: '';
+      display: inline-block;
+      height: 12px;
+      position: absolute;
+      top: calc(-1 * --spacing(1.5));
+      transform: rotate(135deg);
+      z-index: var(--z-index-behind);
+      width: 12px;
+    }
+  }
+
+  .tooltip--bottom,
+  .tooltip--top {
+    left: calc(50% + calc(var(--offset) * 1px));
+    transform: translateX(-50%);
+
+    &::after {
+      left: calc(var(--arrow-position-centered) + calc(var(--offset) * -1px));
+    }
+  }
+
+  .tooltip--bottom {
+    top: var(--tooltip-position);
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+  }
+
+  .tooltip--top {
+    bottom: var(--tooltip-position);
+
+    &::after {
+      top: calc(100% - --spacing(1.5));
+    }
+  }
+
+  .tooltip--left,
+  .tooltip--right {
+    top: 50%;
+    transform: translateY(-50%);
+
+    &::after {
+      top: var(--arrow-position-centered);
+    }
+  }
+
+  .tooltip--left {
+    right: var(--tooltip-position);
+
+    &::after {
+      left: calc(100% - --spacing(1.5));
+      transform: rotate(45deg);
+    }
+  }
+
+  .tooltip--right {
+    left: var(--tooltip-position);
+
+    &::after {
+      left: calc(-1 * --spacing(1.5));
+      transform: rotate(-135deg);
+    }
+  }
+
+  .tooltip-toggle {
+    display: inline-block;
+    position: relative;
+    z-index: 0;
+
+    &:hover {
+      outline: none;
+      z-index: var(--z-index-modal);
+
+      .tooltip {
+        opacity: 0.95;
+        visibility: visible;
+      }
+    }
+  }
+
+  /**
+   * Animations
+   *
+   * Todo: These should be moved to tailwind as custom animations.
+   */
+
+  @keyframes shake {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+      transform: translate3d(-10px, 0, 0);
+    }
+
+    20%,
+    40%,
+    60%,
+    80% {
+      transform: translate3d(10px, 0, 0);
+    }
+  }
+
+  .fx-shake {
+    animation: 2s shake 1;
+  }
+
+
+  @keyframes pulse {
+    0% {
+      transform: scale3d(1, 1, 1);
+    }
+
+    50% {
+      transform: scale3d(1.25, 1.25, 1.25);
+    }
+
+    100% {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  .fx-pulse {
+    animation: 1s pulse;
+  }
+
+  @keyframes spin-loading {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    65% {
+      transform: rotate(720deg);
+    }
+
+    100% {
+      transform: rotate(720deg);
+    }
+  }
+
+  .fx-spin {
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-name: spin-loading;
+    animation-timing-function: ease-in-out;
+  }
+
+  @keyframes flash {
+    0% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .fx-flash {
+    animation: 0.5s flash;
+  }
+
+  /**
+   * Transitions
+   *
+   * Todo: These should be moved to tailwind as custom transitions.
+   * See: https://tailwindcss.com/docs/transition-property
+   */
+
+  .scale-enter-active,
+  .scale-leave-active {
+    transition: 300ms var(--ease-in-out);
+  }
+
+  .scale-enter-from,
+  .scale-leave-from,
+  .scale-leave-to {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+
+  .slide-y-enter-active,
+  .slide-y-leave-active {
+    transition: 150ms var(--ease-swing);
+  }
+
+  .slide-y-enter-from,
+  .slide-y-leave-to {
+    opacity: 0;
+    transform: translateY(-0.875rem);
+  }
+
+  .slide-x-enter-active,
+  .slide-x-leave-active {
+    transition: 150ms var(--ease-swing);
+  }
+
+  .slide-x-enter-from,
+  .slide-x-leave-to {
+    opacity: 0;
+    transform: translateX(-0.875rem);
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 150ms var(--ease-swing);
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .fade-enter-to {
+    opacity: 1;
+  }
+
+  .expand-enter-active,
+  .expand-leave-active {
+    transition:
+      height 300ms var(--ease-in-out),
+      opacity 500ms 150ms,
+      transform 500ms 150ms;
+  }
+
+  .expand-enter-from,
+  .expand-leave-to {
+    height: 0;
+    opacity: 0;
+    transform: translateY(-0.875rem);
+    transition-delay: 0s;
+  }
+
+  .expand-leave-from,
+  .expand-enter-to {
+    height: auto;
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .move-move {
+    transition: transform 150ms var(--ease-swing);
+  }
+
+  #launcher {
+    filter: drop-shadow(4px 18px 18px rgb(38 38 38 / 5%)) drop-shadow(4px 18px 18px rgb(38 38 38 / 10%))
+      drop-shadow(4px 18px 30px rgb(38 38 38 / 15%));
+  }
+}
+