@ebrains/components 0.9.2-beta → 1.0.0

package/dist/collection/components/eds-link/eds-link.css

@@ -0,0 +1,1238 @@
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: currentColor;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+blockquote,
+dl,
+dd,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
+}
+
+.f-body-02 {
+  font-family: var(--f-body-02-fontFamily);
+  font-weight: var(--f-body-02-fontWeight);
+  font-size: var(--f-body-02-fontSize);
+  line-height: var(--f-body-02-lineHeight);
+  letter-spacing: var(--f-body-02-letterSpacing);
+}
+
+.f-ui-01 {
+  font-family: var(--f-ui-01-fontFamily);
+  font-weight: var(--f-ui-01-fontWeight);
+  font-size: var(--f-ui-01-fontSize);
+  line-height: var(--f-ui-01-lineHeight);
+  letter-spacing: var(--f-ui-01-letterSpacing);
+}
+
+.f-ui-02 {
+  font-family: var(--f-ui-02-fontFamily);
+  font-weight: var(--f-ui-02-fontWeight);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
+.f-ui-04 {
+  font-family: var(--f-ui-04-fontFamily);
+  font-weight: var(--f-ui-04-fontWeight);
+  font-size: var(--f-ui-04-fontSize);
+  line-height: var(--f-ui-04-lineHeight);
+  letter-spacing: var(--f-ui-04-letterSpacing);
+}
+
+.f-body-01 b,
+.f-body-01 strong {
+  font-weight: var(--f-body-01---bold-weight, bold);
+}
+
+.f-body-02 b,
+.f-body-02 strong {
+  font-weight: var(--f-body-02---bold-weight, bold);
+}
+
+.f-ui-01 b,
+.f-ui-01 strong {
+  font-weight: var(--f-ui-01---bold-weight, bold);
+}
+
+.f-ui-02 b,
+.f-ui-02 strong {
+  font-weight: var(--f-ui-02---bold-weight, bold);
+}
+
+.border-inside {
+  position: relative;
+
+  &::after {
+    pointer-events: none;
+  }
+
+  &::after {
+    position: absolute;
+  }
+
+  &::after {
+    inset: 0rem;
+  }
+
+  &::after {
+    z-index: 1;
+  }
+
+  &::after {
+    border-radius: 8px;
+  }
+
+  &::after {
+    border-width: 1px;
+  }
+
+  &::after {
+    border-width: 2px;
+  }
+
+  &::after {
+    border-color: rgba(0, 0, 0, .1);
+  }
+
+  &::after {
+    content: '';
+  }
+}
+
+.border-inside-inverse {
+  &::after {
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+
+  &::after {
+    content: '';
+  }
+}
+
+.border-inside-pill {
+  &::after {
+    border-radius: 100px;
+  }
+
+  &::after {
+    content: '';
+  }
+}
+
+.loader {
+  box-sizing: border-box;
+  display: inline-block;
+  height: 1rem;
+  width: 1rem;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loader {
+  animation: spin 1s linear infinite;
+  border-radius: 9999px;
+  border: 3px solid rgba(0, 0, 0, .3);
+  border-bottom-color: #000;
+}
+
+/** region TRANSITIONS */
+.effect-color {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.effect-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+/** endregion */
+/* region FOCUS */
+.effect-focus {
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-color: var(--green-500);
+}
+
+.effect-focus:focus-visible {
+  outline-style: solid;
+}
+
+.effect-focus-within {
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-color: var(--green-500);
+}
+
+.effect-focus-within:focus-within {
+  outline-style: solid;
+}
+
+.effect-bg-behind-link {
+  position: relative;
+}
+
+.effect-bg-behind-link::before {
+  position: absolute;
+  top: 0rem;
+  bottom: 0rem;
+  left: -0.5rem;
+  right: 0rem;
+  z-index: 0;
+  border-radius: 8px;
+  background-color: var(--grey-400);
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
+.effect-bg-behind-link[aria-disabled="true"]::before {
+  background-color: var(--transparent);
+}
+
+/* endregion */
+/*region shadow*/
+/*endregion*/
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.visible {
+  visibility: visible;
+}
+
+.static {
+  position: static;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.-top-1 {
+  top: -0.0625rem;
+}
+
+.z-0 {
+  z-index: 0;
+}
+
+.z-1 {
+  z-index: 1;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.-ml-8 {
+  margin-left: -0.5rem;
+}
+
+.-ml-16 {
+  margin-left: -1rem;
+}
+
+.-mr-4 {
+  margin-right: -0.25rem;
+}
+
+.-mr-8 {
+  margin-right: -0.5rem;
+}
+
+.-mr-16 {
+  margin-right: -1rem;
+}
+
+.ml-0 {
+  margin-left: 0rem;
+}
+
+.ml-4 {
+  margin-left: 0.25rem;
+}
+
+.ml-64 {
+  margin-left: 4rem;
+}
+
+.ml-8 {
+  margin-left: 0.5rem;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-0 {
+  margin-right: 0rem;
+}
+
+.mr-2 {
+  margin-right: 0.125rem;
+}
+
+.mr-4 {
+  margin-right: 0.25rem;
+}
+
+.mr-8 {
+  margin-right: 0.5rem;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-20 {
+  height: 1.25rem;
+}
+
+.h-24 {
+  height: 1.5rem;
+}
+
+.h-36 {
+  height: 2.25rem;
+}
+
+.h-44 {
+  height: 2.75rem;
+}
+
+.\!min-h-0 {
+  min-height: 0rem !important;
+}
+
+.\!min-h-20 {
+  min-height: 1.25rem !important;
+}
+
+.min-h-36 {
+  min-height: 2.25rem;
+}
+
+.min-h-44 {
+  min-height: 2.75rem;
+}
+
+.min-h-full {
+  min-height: 100%;
+}
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.w-20 {
+  width: 1.25rem;
+}
+
+.w-24 {
+  width: 1.5rem;
+}
+
+.w-28 {
+  width: 1.75rem;
+}
+
+.w-32 {
+  width: 2rem;
+}
+
+.w-4 {
+  width: 0.25rem;
+}
+
+.w-44 {
+  width: 2.75rem;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.max-w-full {
+  max-width: 100%;
+}
+
+.flex-none {
+  flex: none;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.resize {
+  resize: both;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.break-words {
+  overflow-wrap: break-word;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-sm {
+  border-radius: 8px;
+}
+
+.rounded-xs {
+  border-radius: 4px;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-\[\#0034CB\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 52 203 / var(--tw-border-opacity));
+}
+
+.border-soft {
+  border-color: rgba(0, 0, 0, .15);
+}
+
+.border-softer {
+  border-color: rgba(0, 0, 0, .1);
+}
+
+.border-softest {
+  border-color: rgba(0, 0, 0, .05);
+}
+
+.border-transparent {
+  border-color: var(--transparent);
+}
+
+.border-b-softer {
+  border-bottom-color: rgba(0, 0, 0, .1);
+}
+
+.\!bg-accent-dark {
+  background-color: var(--green-600) !important;
+}
+
+.\!bg-darker {
+  background-color: var(--grey-400) !important;
+}
+
+.\!bg-strong-dark {
+  background-color: var(--grey-800) !important;
+}
+
+.bg-accent {
+  background-color: var(--green-500);
+}
+
+.bg-accent-dark {
+  background-color: var(--green-600);
+}
+
+.bg-accent-darker {
+  background-color: var(--green-800);
+}
+
+.bg-current {
+  background-color: currentColor;
+}
+
+.bg-dark {
+  background-color: var(--grey-300);
+}
+
+.bg-darker {
+  background-color: var(--grey-400);
+}
+
+.bg-default {
+  background-color: var(--grey-200);
+}
+
+.bg-inverse {
+  background-color: var(--white);
+}
+
+.bg-inverse-soft {
+  background-color: rgba(255, 255, 255, .2);
+}
+
+.bg-inverse-softer {
+  background-color: rgba(255, 255, 255, .15);
+}
+
+.bg-overlay {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+.bg-strong {
+  background-color: var(--grey-700);
+}
+
+.bg-strong-dark {
+  background-color: var(--grey-800);
+}
+
+.bg-stronger {
+  background-color: var(--grey-900);
+}
+
+.bg-strongest {
+  background-color: var(--black);
+}
+
+.bg-transparent {
+  background-color: var(--transparent);
+}
+
+.\!p-8 {
+  padding: 0.5rem !important;
+}
+
+.\!px-0 {
+  padding-left: 0rem !important;
+  padding-right: 0rem !important;
+}
+
+.\!py-0 {
+  padding-top: 0rem !important;
+  padding-bottom: 0rem !important;
+}
+
+.\!py-4 {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
+.px-12 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-16 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-2 {
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+}
+
+.px-20 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.px-4 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.py-4 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-6 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.py-8 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.\!pt-4 {
+  padding-top: 0.25rem !important;
+}
+
+.pl-12 {
+  padding-left: 0.75rem;
+}
+
+.pl-28 {
+  padding-left: 1.75rem;
+}
+
+.pl-32 {
+  padding-left: 2rem;
+}
+
+.pl-36 {
+  padding-left: 2.25rem;
+}
+
+.pl-4 {
+  padding-left: 0.25rem;
+}
+
+.pl-8 {
+  padding-left: 0.5rem;
+}
+
+.pr-12 {
+  padding-right: 0.75rem;
+}
+
+.pr-28 {
+  padding-right: 1.75rem;
+}
+
+.pr-32 {
+  padding-right: 2rem;
+}
+
+.pr-4 {
+  padding-right: 0.25rem;
+}
+
+.pr-8 {
+  padding-right: 0.5rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.\!text-current {
+  color: currentColor !important;
+}
+
+.text-\[\#0034CB\] {
+  --tw-text-opacity: 1;
+  color: rgb(0 52 203 / var(--tw-text-opacity));
+}
+
+.text-accent {
+  color: var(--green-500);
+}
+
+.text-current {
+  color: currentColor;
+}
+
+.text-default {
+  color: var(--black);
+}
+
+.text-error {
+  color: var(--red-700);
+}
+
+.text-extra-light {
+  color: var(--grey-300);
+}
+
+.text-inverse {
+  color: var(--white);
+}
+
+.text-light {
+  color: var(--grey-700);
+}
+
+.text-lighter {
+  color: var(--grey-600);
+}
+
+.text-lightest {
+  color: var(--grey-500);
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.\!no-underline {
+  text-decoration-line: none !important;
+}
+
+.decoration-\[\#0034CB\] {
+  text-decoration-color: #0034CB;
+}
+
+.decoration-accent {
+  text-decoration-color: var(--green-500);
+}
+
+.decoration-2 {
+  text-decoration-thickness: 2px;
+}
+
+.underline-offset-4 {
+  text-underline-offset: 4px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-accent {
+  --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);
+  --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.outline {
+  outline-style: solid;
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+[class*=underline-] {
+  text-decoration-line: underline;
+}
+
+.underline-offset-4 {
+  text-underline-offset: 0.2em;
+}
+
+.\@container {
+  container-type: inline-size;
+}
+
+.after\:effect-opacity::after {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.before\:effect-opacity::before {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.even\:bg-inverse-softer:nth-child(even) {
+  background-color: rgba(255, 255, 255, .15);
+}
+
+.invalid\:text-lightest:invalid {
+  color: var(--grey-500);
+}
+
+.focus-within\:bg-transparent:focus-within {
+  background-color: var(--transparent);
+}
+
+.hover\:bg-accent-dark:hover {
+  background-color: var(--green-600);
+}
+
+.hover\:bg-dark:hover {
+  background-color: var(--grey-300);
+}
+
+.hover\:bg-darker:hover {
+  background-color: var(--grey-400);
+}
+
+.hover\:bg-default:hover {
+  background-color: var(--grey-200);
+}
+
+.hover\:bg-inverse:hover {
+  background-color: var(--white);
+}
+
+.hover\:bg-strong-dark:hover {
+  background-color: var(--grey-800);
+}
+
+.hover\:bg-transparent:hover {
+  background-color: var(--transparent);
+}
+
+.hover\:text-default:hover {
+  color: var(--black);
+}
+
+.hover\:text-lighter:hover {
+  color: var(--grey-600);
+}
+
+.hover\:\!underline:hover {
+  text-decoration-line: underline !important;
+}
+
+.hover\:no-underline:hover {
+  text-decoration-line: none;
+}
+
+.hover\:shadow-hover:hover {
+  --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
+  --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.focus\:shadow-none:focus {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus-visible\:rounded-xs:focus-visible {
+  border-radius: 4px;
+}
+
+.focus-visible\:text-default:focus-visible {
+  color: var(--black);
+}
+
+.focus-visible\:outline-none:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus-visible\:ring:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.disabled\:cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+
+.disabled\:bg-dark:disabled {
+  background-color: var(--grey-300);
+}
+
+.disabled\:text-lightest:disabled {
+  color: var(--grey-500);
+}
+
+.aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.aria-disabled\:\!border-transparent[aria-disabled="true"] {
+  border-color: var(--transparent) !important;
+}
+
+.aria-disabled\:bg-dark[aria-disabled="true"] {
+  background-color: var(--grey-300);
+}
+
+.aria-disabled\:bg-transparent[aria-disabled="true"] {
+  background-color: var(--transparent);
+}
+
+.aria-disabled\:text-light[aria-disabled="true"] {
+  color: var(--grey-700);
+}
+
+.aria-disabled\:text-lightest[aria-disabled="true"] {
+  color: var(--grey-500);
+}
+
+.aria-disabled\:line-through[aria-disabled="true"] {
+  text-decoration-line: line-through;
+}
+
+.aria-disabled\:shadow-none[aria-disabled="true"] {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.aria-disabled\:no-underline[aria-disabled="true"] {
+  text-decoration-line: none;
+}
+
+.aria-current-page\:bg-darker[aria-current="page"] {
+  background-color: var(--grey-400);
+}
+
+.after\:absolute::after {
+  position: absolute;
+}
+
+.after\:inset-0::after {
+  inset: 0rem;
+}
+
+.after\:inset-x-0::after {
+  left: 0rem;
+  right: 0rem;
+}
+
+.after\:bottom-0::after {
+  bottom: 0rem;
+}
+
+.after\:left-16::after {
+  left: 1rem;
+}
+
+.after\:right-16::after {
+  right: 1rem;
+}
+
+.after\:z-10::after {
+  z-index: 10;
+}
+
+.after\:rounded-lg::after {
+  border-radius: 16px;
+}
+
+.after\:rounded-t-lg::after {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+
+.after\:border-3::after {
+  border-width: 3px;
+}
+
+.after\:border-b-2::after {
+  border-bottom-width: 2px;
+}
+
+.after\:\!border-transparent::after {
+  border-color: var(--transparent) !important;
+}
+
+.after\:border-accent::after {
+  border-color: var(--green-500);
+}
+
+.after\:border-softest::after {
+  border-color: rgba(0, 0, 0, .05);
+}
+
+.after\:opacity-0::after {
+  opacity: 0;
+}
+
+.after\:content-\[\'\'\]::after {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
+.hover\:after\:\!border-transparent:hover::after {
+  border-color: var(--transparent) !important;
+}
+
+.hover\:after\:opacity-100:hover::after {
+  opacity: 1;
+}
+
+.focus-visible\:after\:opacity-100:focus-visible::after {
+  opacity: 1;
+}
+
+.aria-disabled\:after\:\!border-transparent[aria-disabled="true"]::after {
+  border-color: var(--transparent) !important;
+}
+
+.before\:absolute::before {
+  position: absolute;
+}
+
+.before\:inset-x-0::before {
+  left: 0rem;
+  right: 0rem;
+}
+
+.before\:-bottom-2::before {
+  bottom: -0.125rem;
+}
+
+.before\:bottom-0::before {
+  bottom: 0rem;
+}
+
+.before\:h-12::before {
+  height: 0.75rem;
+}
+
+.before\:h-3::before {
+  height: 0.1875rem;
+}
+
+.before\:rounded-lg::before {
+  border-radius: 16px;
+}
+
+.before\:border-2::before {
+  border-width: 2px;
+}
+
+.before\:border-softest::before {
+  border-color: rgba(0, 0, 0, .05);
+}
+
+.before\:bg-default::before {
+  background-color: var(--grey-200);
+}
+
+.before\:bg-inverse-softer::before {
+  background-color: rgba(255, 255, 255, .15);
+}
+
+.before\:\!opacity-100::before {
+  opacity: 1 !important;
+}
+
+.before\:opacity-0::before {
+  opacity: 0;
+}
+
+.before\:opacity-5::before {
+  opacity: 0.05;
+}
+
+.before\:content-\[\'\'\]::before {
+  --tw-content: '';
+  content: var(--tw-content);
+}
+
+.before\:bg-gradient-y::before {
+  background: linear-gradient(to bottom, transparent, ease-in-out, black);
+}
+
+.before\:bg-gradient-01-top::before {
+  background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);
+}
+
+.before\:bg-gradient-01-bottom::before {
+  background: linear-gradient(to top, #00E766, ease-in-out, #E6E6E6);
+}
+
+.before\:bg-gradient-02-top::before {
+  background: linear-gradient(to bottom, #F3F30A, ease-in-out, #E6E6E6);
+}
+
+.before\:bg-gradient-02-bottom::before {
+  background: linear-gradient(to top, #F3F30A, ease-in-out, #E6E6E6);
+}
+
+.before\:bg-gradient-03-top::before {
+  background: linear-gradient(to bottom, #C461FF, ease-in-out, #E6E6E6);
+}
+
+.before\:bg-gradient-03-bottom::before {
+  background: linear-gradient(to top, #C461FF, ease-in-out, #E6E6E6);
+}
+
+.before\:bg-gradient-04-top::before {
+  background: linear-gradient(to bottom, #2B69FC, ease-in-out, #E6E6E6);
+}
+
+.before\:bg-gradient-04-bottom::before {
+  background: linear-gradient(to top, #2B69FC, ease-in-out, #E6E6E6);
+}
+
+.hover\:before\:opacity-100:hover::before {
+  opacity: 1;
+}
+
+.focus-visible\:before\:\!opacity-0:focus-visible::before {
+  opacity: 0 !important;
+}
+
+.focus-visible\:before\:opacity-0:focus-visible::before {
+  opacity: 0;
+}
+
+@media (min-width: 900px) {
+  .lg\:flex {
+    display: flex;
+  }
+}