html {
  overflow-x: hidden;
  font-size: 16px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overscroll-behavior: none;
}

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  color: hsl(0, 0%, 29%);
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
}

*,
::after,
::before {
  box-sizing: border-box;
}

a {
  color: rgb(0, 100, 200);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: rgb(0, 80, 160);
}

label {
  display: block;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  border: 1px solid #ccc;
  border-radius: 2px;
}

input:disabled {
  color: #ccc;
}

button {
  color: #333;
  background-color: #f4f4f4;
  outline: none;
}

button:disabled {
  color: #999;
}

button:not(:disabled):active {
  background-color: #ddd;
}

button:focus {
  border-color: #666;
}

.fav-prompt-slot {
  width: 33%;
  height: 60px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--gray-300);
  font-size: var(--font-d2);
  background-color: white;
  transition: background-color 100ms;
  position: relative;

  &:hover {
    box-shadow:
      0 0 10px hsla(0, 0%, 0%, 0.05),
      0 0 4px hsla(0, 0%, 0%, 0.05);
  }

  .prompt-mini-card {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    margin: auto 0px;
    display: flex;
    flex-flow: row;
    padding: 12px;
    gap: 8px;
    box-sizing: border-box;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;

    &[is-empty] {
      .title {
        display: flex;
        align-items: center;
        line-height: 1;
        top: -1px;
        position: relative;
        color: var(--gray-500);
      }
    }
  }

  .title {
    display: -webkit-box;
    line-height: 1.2;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .icon {
    display: flex;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    transform-origin: center center 0px;
    background-color: white;

    border-radius: 100%;
    border: 1px solid var(--gray-300);
    position: relative;

    box-sizing: border-box;
    transition: box-shadow linear 100ms;

    & span {
      /* Trick to horizontally align emojis */
      font-size: 34px;
      transform: scale(0.5);

      color: var(--gray-700);
      font-weight: 700;
      line-height: 1;
    }
  }
}

:root {
  /* Shadows */
  --shadow-border-light: 0px 0px 5px hsla(0, 0%, 0%, 0.1),
    0px 0px 4px hsla(0, 0%, 0%, 0.07), 0px 0px 10px hsla(0, 0%, 0%, 0.07);
  --shadow-border-card: 0px 0px 6px hsla(0, 0%, 0%, 0.07);
  --shadow-border-large: 0 8px 24px hsla(212, 9%, 59%, 0.2);

  /* Ease functions */
  --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);

  /* Layouts */
  --border-radius: 5px;
  --container-h-padding: 12px;
  --container-v-padding: 10px;

  /* Font sizes */
  --font-d1: 0.9375rem;
  --font-d2: 0.875rem;
  --font-d3: 0.8125rem;
  --font-d4: 0.75rem;
  --font-d5: 0.6875rem;
  --font-d6: 0.625rem;

  --font-u1: 1.0625rem;
  --font-u2: 1.125rem;
  --font-u3: 1.1875rem;
  --font-u4: 1.25rem;
  --font-u5: 1.3125rem;
  --font-u6: 1.375rem;

  /* Custom colors */
  --added-color: hsl(120, 37%, 89%);
  --replaced-color: hsl(208, 88%, 90%);
  --deleted--color: hsl(353, 100%, 93%);

  /* Colors */
  --red-50: hsl(350, 100%, 96.08%);
  --red-100: hsl(354, 100%, 90.2%);
  --red-200: hsl(0, 72.65%, 77.06%);
  --red-300: hsl(0, 68.67%, 67.45%);
  --red-400: hsl(1, 83.25%, 62.55%);
  --red-500: hsl(4, 89.62%, 58.43%);
  --red-600: hsl(1, 77.19%, 55.29%);
  --red-700: hsl(0, 65.08%, 50.59%);
  --red-800: hsl(0, 66.39%, 46.67%);
  --red-900: hsl(0, 73.46%, 41.37%);
  --red-a100: hsl(4, 100%, 75.1%);
  --red-a200: hsl(0, 100%, 66.08%);
  --red-a400: hsl(348, 100%, 54.51%);
  --red-a700: hsl(0, 100%, 41.76%);

  --pink-50: hsl(340, 80%, 94.12%);
  --pink-100: hsl(339, 81.33%, 85.29%);
  --pink-200: hsl(339, 82.11%, 75.88%);
  --pink-300: hsl(339, 82.56%, 66.27%);
  --pink-400: hsl(339, 81.9%, 58.82%);
  --pink-500: hsl(339, 82.19%, 51.57%);
  --pink-600: hsl(338, 77.78%, 47.65%);
  --pink-700: hsl(336, 77.98%, 42.75%);
  --pink-800: hsl(333, 79.27%, 37.84%);
  --pink-900: hsl(328, 81.33%, 29.41%);
  --pink-a100: hsl(339, 100%, 75.1%);
  --pink-a200: hsl(339, 100%, 62.55%);
  --pink-a400: hsl(338, 100%, 48.04%);
  --pink-a700: hsl(333, 84.11%, 41.96%);

  --purple-50: hsl(292, 44.44%, 92.94%);
  --purple-100: hsl(291, 46.07%, 82.55%);
  --purple-200: hsl(291, 46.94%, 71.18%);
  --purple-300: hsl(291, 46.6%, 59.61%);
  --purple-400: hsl(291, 46.61%, 50.78%);
  --purple-500: hsl(291, 63.72%, 42.16%);
  --purple-600: hsl(287, 65.05%, 40.39%);
  --purple-700: hsl(282, 67.88%, 37.84%);
  --purple-800: hsl(277, 70.17%, 35.49%);
  --purple-900: hsl(267, 75%, 31.37%);
  --purple-a100: hsl(291, 95.38%, 74.51%);
  --purple-a200: hsl(291, 95.9%, 61.76%);
  --purple-a400: hsl(291, 100%, 48.82%);
  --purple-a700: hsl(280, 100%, 50%);

  --deep-purple-50: hsl(264, 45.45%, 93.53%);
  --deep-purple-100: hsl(261, 45.68%, 84.12%);
  --deep-purple-200: hsl(261, 46.27%, 73.73%);
  --deep-purple-300: hsl(261, 46.81%, 63.14%);
  --deep-purple-400: hsl(261, 46.72%, 55.1%);
  --deep-purple-500: hsl(261, 51.87%, 47.25%);
  --deep-purple-600: hsl(259, 53.91%, 45.1%);
  --deep-purple-700: hsl(257, 57.75%, 41.76%);
  --deep-purple-800: hsl(254, 60.8%, 39.02%);
  --deep-purple-900: hsl(251, 68.79%, 33.92%);
  --deep-purple-a100: hsl(261, 100%, 76.67%);
  --deep-purple-a200: hsl(255, 100%, 65.1%);
  --deep-purple-a400: hsl(258, 100%, 56.08%);
  --deep-purple-a700: hsl(265, 100%, 45.88%);

  --indigo-50: hsl(231, 43.75%, 93.73%);
  --indigo-100: hsl(231, 45%, 84.31%);
  --indigo-200: hsl(230, 44.36%, 73.92%);
  --indigo-300: hsl(230, 44.09%, 63.53%);
  --indigo-400: hsl(230, 44.25%, 55.69%);
  --indigo-500: hsl(230, 48.36%, 47.84%);
  --indigo-600: hsl(231, 50%, 44.71%);
  --indigo-700: hsl(231, 53.62%, 40.59%);
  --indigo-800: hsl(232, 57.22%, 36.67%);
  --indigo-900: hsl(234, 65.79%, 29.8%);
  --indigo-a100: hsl(230, 100%, 77.45%);
  --indigo-a200: hsl(230, 98.84%, 66.08%);
  --indigo-a400: hsl(230, 98.97%, 61.76%);
  --indigo-a700: hsl(230, 99.04%, 59.22%);

  --blue-50: hsl(205, 86.67%, 94.12%);
  --blue-100: hsl(207, 88.89%, 85.88%);
  --blue-200: hsl(206, 89.74%, 77.06%);
  --blue-300: hsl(206, 89.02%, 67.84%);
  --blue-400: hsl(206, 89.95%, 60.98%);
  --blue-500: hsl(206, 89.74%, 54.12%);
  --blue-600: hsl(208, 79.28%, 50.78%);
  --blue-700: hsl(209, 78.72%, 46.08%);
  --blue-800: hsl(211, 80.28%, 41.76%);
  --blue-900: hsl(216, 85.06%, 34.12%);
  --blue-a100: hsl(217, 100%, 75.49%);
  --blue-a200: hsl(217, 100%, 63.33%);
  --blue-a400: hsl(217, 100%, 58.04%);
  --blue-a700: hsl(224, 100%, 58.04%);

  --light-blue-50: hsl(198, 93.55%, 93.92%);
  --light-blue-100: hsl(198, 92.41%, 84.51%);
  --light-blue-200: hsl(198, 92.37%, 74.31%);
  --light-blue-300: hsl(198, 91.3%, 63.92%);
  --light-blue-400: hsl(198, 91.93%, 56.27%);
  --light-blue-500: hsl(198, 97.57%, 48.43%);
  --light-blue-600: hsl(199, 97.41%, 45.49%);
  --light-blue-700: hsl(201, 98.1%, 41.37%);
  --light-blue-800: hsl(202, 97.91%, 37.45%);
  --light-blue-900: hsl(206, 98.72%, 30.59%);
  --light-blue-a100: hsl(198, 100%, 75.1%);
  --light-blue-a200: hsl(198, 100%, 62.55%);
  --light-blue-a400: hsl(198, 100%, 50%);
  --light-blue-a700: hsl(202, 100%, 45.88%);

  --cyan-50: hsl(186, 72.22%, 92.94%);
  --cyan-100: hsl(186, 71.11%, 82.35%);
  --cyan-200: hsl(186, 71.62%, 70.98%);
  --cyan-300: hsl(186, 71.15%, 59.22%);
  --cyan-400: hsl(186, 70.87%, 50.2%);
  --cyan-500: hsl(186, 100%, 41.57%);
  --cyan-600: hsl(186, 100%, 37.84%);
  --cyan-700: hsl(185, 100%, 32.75%);
  --cyan-800: hsl(185, 100%, 28.04%);
  --cyan-900: hsl(182, 100%, 19.61%);
  --cyan-a100: hsl(180, 100%, 75.88%);
  --cyan-a200: hsl(180, 100%, 54.71%);
  --cyan-a400: hsl(186, 100%, 50%);
  --cyan-a700: hsl(187, 100%, 41.57%);

  --teal-50: hsl(176, 40.91%, 91.37%);
  --teal-100: hsl(174, 41.28%, 78.63%);
  --teal-200: hsl(174, 41.9%, 64.9%);
  --teal-300: hsl(174, 41.83%, 50.78%);
  --teal-400: hsl(174, 62.75%, 40%);
  --teal-500: hsl(174, 100%, 29.41%);
  --teal-600: hsl(173, 100%, 26.86%);
  --teal-700: hsl(173, 100%, 23.73%);
  --teal-800: hsl(172, 100%, 20.59%);
  --teal-900: hsl(169, 100%, 15.1%);
  --teal-a100: hsl(166, 100%, 82.75%);
  --teal-a200: hsl(165, 100%, 69.61%);
  --teal-a400: hsl(165, 82.26%, 51.37%);
  --teal-a700: hsl(171, 100%, 37.45%);

  --green-50: hsl(124, 39.39%, 93.53%);
  --green-100: hsl(121, 37.5%, 84.31%);
  --green-200: hsl(122, 37.4%, 74.31%);
  --green-300: hsl(122, 38.46%, 64.31%);
  --green-400: hsl(122, 38.46%, 56.67%);
  --green-500: hsl(122, 39.44%, 49.22%);
  --green-600: hsl(122, 40.97%, 44.51%);
  --green-700: hsl(122, 43.43%, 38.82%);
  --green-800: hsl(123, 46.2%, 33.53%);
  --green-900: hsl(124, 55.37%, 23.73%);
  --green-a100: hsl(136, 77.22%, 84.51%);
  --green-a200: hsl(150, 81.82%, 67.65%);
  --green-a400: hsl(150, 100%, 45.1%);
  --green-a700: hsl(144, 100%, 39.22%);

  --light-green-50: hsl(88, 51.72%, 94.31%);
  --light-green-100: hsl(87, 50.68%, 85.69%);
  --light-green-200: hsl(88, 50%, 76.47%);
  --light-green-300: hsl(87, 50%, 67.06%);
  --light-green-400: hsl(87, 50.24%, 59.8%);
  --light-green-500: hsl(87, 50.21%, 52.75%);
  --light-green-600: hsl(89, 46.12%, 48.04%);
  --light-green-700: hsl(92, 47.91%, 42.16%);
  --light-green-800: hsl(95, 49.46%, 36.47%);
  --light-green-900: hsl(103, 55.56%, 26.47%);
  --light-green-a100: hsl(87, 100%, 78.24%);
  --light-green-a200: hsl(87, 100%, 67.45%);
  --light-green-a400: hsl(92, 100%, 50.59%);
  --light-green-a700: hsl(96, 81.15%, 47.84%);

  --lime-50: hsl(65, 71.43%, 94.51%);
  --lime-100: hsl(64, 69.01%, 86.08%);
  --lime-200: hsl(65, 70.69%, 77.25%);
  --lime-300: hsl(65, 70.37%, 68.24%);
  --lime-400: hsl(65, 69.7%, 61.18%);
  --lime-500: hsl(65, 69.96%, 54.31%);
  --lime-600: hsl(63, 59.68%, 49.61%);
  --lime-700: hsl(62, 61.43%, 43.73%);
  --lime-800: hsl(59, 62.89%, 38.04%);
  --lime-900: hsl(53, 69.93%, 30%);
  --lime-a100: hsl(65, 100%, 75.29%);
  --lime-a200: hsl(65, 100%, 62.75%);
  --lime-a400: hsl(73, 100%, 50%);
  --lime-a700: hsl(75, 100%, 45.88%);

  --yellow-50: hsl(55, 100%, 95.29%);
  --yellow-100: hsl(53, 100%, 88.43%);
  --yellow-200: hsl(53, 100%, 80.78%);
  --yellow-300: hsl(53, 100%, 73.14%);
  --yellow-400: hsl(53, 100%, 67.25%);
  --yellow-500: hsl(53, 100%, 61.57%);
  --yellow-600: hsl(48, 98.04%, 60%);
  --yellow-700: hsl(42, 96.26%, 58.04%);
  --yellow-800: hsl(37, 94.64%, 56.08%);
  --yellow-900: hsl(28, 91.74%, 52.55%);
  --yellow-a100: hsl(60, 100%, 77.65%);
  --yellow-a200: hsl(60, 100%, 50%);
  --yellow-a400: hsl(55, 100%, 50%);
  --yellow-a700: hsl(50, 100%, 50%);

  --amber-50: hsl(46, 100%, 94.12%);
  --amber-100: hsl(45, 100%, 85.1%);
  --amber-200: hsl(45, 100%, 75.49%);
  --amber-300: hsl(45, 100%, 65.49%);
  --amber-400: hsl(45, 100%, 57.84%);
  --amber-500: hsl(45, 100%, 51.37%);
  --amber-600: hsl(42, 100%, 50%);
  --amber-700: hsl(37, 100%, 50%);
  --amber-800: hsl(33, 100%, 50%);
  --amber-900: hsl(26, 100%, 50%);
  --amber-a100: hsl(47, 100%, 74.9%);
  --amber-a200: hsl(47, 100%, 62.55%);
  --amber-a400: hsl(46, 100%, 50%);
  --amber-a700: hsl(40, 100%, 50%);

  --orange-50: hsl(36, 100%, 93.92%);
  --orange-100: hsl(35, 100%, 84.9%);
  --orange-200: hsl(35, 100%, 75.1%);
  --orange-300: hsl(35, 100%, 65.1%);
  --orange-400: hsl(35, 100%, 57.45%);
  --orange-500: hsl(35, 100%, 50%);
  --orange-600: hsl(33, 100%, 49.22%);
  --orange-700: hsl(30, 100%, 48.04%);
  --orange-800: hsl(27, 100%, 46.86%);
  --orange-900: hsl(21, 100%, 45.1%);
  --orange-a100: hsl(38, 100%, 75.1%);
  --orange-a200: hsl(33, 100%, 62.55%);
  --orange-a400: hsl(34, 100%, 50%);
  --orange-a700: hsl(25, 100%, 50%);

  --deep-orange-50: hsl(5, 71.43%, 94.51%);
  --deep-orange-100: hsl(14, 100%, 86.86%);
  --deep-orange-200: hsl(14, 100%, 78.43%);
  --deep-orange-300: hsl(14, 100%, 69.8%);
  --deep-orange-400: hsl(14, 100%, 63.14%);
  --deep-orange-500: hsl(14, 100%, 56.67%);
  --deep-orange-600: hsl(14, 90.68%, 53.73%);
  --deep-orange-700: hsl(14, 80.39%, 50%);
  --deep-orange-800: hsl(14, 82.28%, 46.47%);
  --deep-orange-900: hsl(14, 88.18%, 39.8%);
  --deep-orange-a100: hsl(14, 100%, 75.1%);
  --deep-orange-a200: hsl(14, 100%, 62.55%);
  --deep-orange-a400: hsl(14, 100%, 50%);
  --deep-orange-a700: hsl(11, 100%, 43.33%);

  --brown-50: hsl(19, 15.79%, 92.55%);
  --brown-100: hsl(16, 15.79%, 81.37%);
  --brown-200: hsl(14, 15.19%, 69.02%);
  --brown-300: hsl(15, 15.32%, 56.47%);
  --brown-400: hsl(15, 17.5%, 47.06%);
  --brown-500: hsl(15, 25.39%, 37.84%);
  --brown-600: hsl(15, 25.29%, 34.12%);
  --brown-700: hsl(14, 25.68%, 29.02%);
  --brown-800: hsl(11, 25.81%, 24.31%);
  --brown-900: hsl(8, 27.84%, 19.02%);

  --gray-50: hsl(0, 0%, 98.04%);
  --gray-100: hsl(0, 0%, 96.08%);
  --gray-200: hsl(0, 0%, 93.33%);
  --gray-300: hsl(0, 0%, 87.84%);
  --gray-400: hsl(0, 0%, 74.12%);
  --gray-500: hsl(0, 0%, 61.96%);
  --gray-600: hsl(0, 0%, 45.88%);
  --gray-700: hsl(0, 0%, 38.04%);
  --gray-800: hsl(0, 0%, 25.88%);
  --gray-900: hsl(0, 0%, 12.94%);

  --blue-gray-50: hsl(204, 15.15%, 93.53%);
  --blue-gray-100: hsl(198, 15.66%, 83.73%);
  --blue-gray-200: hsl(199, 15.33%, 73.14%);
  --blue-gray-300: hsl(199, 15.63%, 62.35%);
  --blue-gray-400: hsl(200, 15.38%, 54.12%);
  --blue-gray-500: hsl(199, 18.3%, 46.08%);
  --blue-gray-600: hsl(198, 18.45%, 40.39%);
  --blue-gray-700: hsl(199, 18.34%, 33.14%);
  --blue-gray-800: hsl(199, 17.91%, 26.27%);
  --blue-gray-900: hsl(199, 19.15%, 18.43%);
  --blue-gray-1000: hsl(199, 20.93%, 8.43%);
}