/*
 * 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%));
  }
}