@vsn-ux/gaia-styles 0.1.1

package/dist/components.css

@@ -0,0 +1,861 @@
+/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
+.ga-avatar {
+  display: inline-flex;
+  height: calc(0.25rem * 10);
+  width: calc(0.25rem * 10);
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: calc(infinity * 1px);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  vertical-align: middle;
+  --tw-font-weight: 700;
+  font-weight: 700;
+  &.ga-avatar--small {
+    height: calc(0.25rem * 6);
+    width: calc(0.25rem * 6);
+    font-size: var(--ga-size-font-sm);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, 0);
+  }
+  &.ga-avatar--large {
+    height: calc(0.25rem * 16);
+    width: calc(0.25rem * 16);
+    font-size: var(--ga-size-font-2xl);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 2.25));
+    letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.019));
+  }
+}
+.ga-badge {
+  display: inline-block;
+  border-radius: calc(infinity * 1px);
+  vertical-align: baseline;
+  &.ga-badge--text {
+    min-width: calc(0.25rem * 6);
+    padding: calc(0.25rem * 1);
+    text-align: center;
+    font-size: var(--ga-size-font-sm);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, 0);
+    --tw-leading: calc(0.25rem * 4);
+    line-height: calc(0.25rem * 4);
+    --tw-font-weight: 500;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  &.ga-badge--dot {
+    height: calc(0.25rem * 2);
+    width: calc(0.25rem * 2);
+  }
+  &.ga-badge--default {
+    background-color: var(--ga-color-surface-action);
+    color: var(--ga-color-text-on-action);
+  }
+  &.ga-badge--default-inverted {
+    background-color: var(--ga-color-orange-20);
+    color: var(--ga-color-cyan-90);
+  }
+  &.ga-badge--information {
+    background-color: var(--ga-color-blue-40);
+    color: var(--ga-color-cyan-90);
+  }
+  &.ga-badge--error {
+    background-color: var(--ga-color-red-40);
+    color: var(--ga-color-cyan-90);
+  }
+  &.ga-badge--warning {
+    background-color: var(--ga-color-orange-40);
+    color: var(--ga-color-cyan-90);
+  }
+  &.ga-badge--success {
+    background-color: var(--ga-color-green-40);
+    color: var(--ga-color-cyan-90);
+  }
+  &.ga-badge--muted {
+    background-color: #fff;
+    color: var(--ga-color-cyan-70);
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--ga-color-grey-40);
+    --tw-ring-inset: inset;
+  }
+  &.ga-badge--disabled {
+    background-color: var(--ga-color-surface-disabled);
+    color: var(--ga-color-text);
+  }
+}
+.ga-button {
+  display: inline-flex;
+  height: calc(0.25rem * 10);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: calc(0.25rem * 2);
+  border-radius: var(--ga-radius);
+  padding-inline: calc(0.25rem * 4);
+  vertical-align: middle;
+  font-size: var(--ga-size-font-md);
+  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+  --tw-leading: calc(0.25rem * 1);
+  line-height: calc(0.25rem * 1);
+  --tw-font-weight: 700;
+  font-weight: 700;
+  &:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+    outline-offset: 2px;
+    outline-color: var(--ga-color-border-focus);
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  &.ga-button--primary {
+    background-color: var(--ga-color-surface-action);
+    color: var(--ga-color-text-on-action);
+    &:hover {
+      background-color: var(--ga-color-surface-action-hover);
+    }
+    &:active {
+      background-color: var(--ga-color-primary-70);
+    }
+    &:disabled {
+      background-color: var(--ga-color-surface-disabled);
+      color: var(--ga-color-text-disabled);
+    }
+  }
+  &.ga-button--secondary {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-action);
+    background-color: var(--ga-color-surface-primary);
+    color: var(--ga-color-text-action);
+    &:hover {
+      background-color: var(--ga-color-surface-action-hover-2);
+    }
+    &:active {
+      background-color: var(--ga-color-surface-primary);
+    }
+    &:disabled {
+      border-color: var(--ga-color-border-disabled);
+      background-color: var(--ga-color-surace-page);
+      color: var(--ga-color-text-disabled);
+    }
+  }
+  &.ga-button--ghost {
+    background-color: transparent;
+    color: var(--ga-color-text-action);
+    &:hover {
+      background-color: var(--ga-color-surface-action-hover-2);
+    }
+    &:active {
+      background-color: transparent;
+    }
+    &:disabled {
+      background-color: transparent;
+      color: var(--ga-color-text-disabled);
+    }
+  }
+  &.ga-button--transparent {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-action);
+    background-color: transparent;
+    color: var(--ga-color-text-action);
+    &:hover {
+      background-color: var(--ga-color-surface-action-hover-2);
+    }
+    &:focus-visible {
+      border-color: var(--ga-color-border-action);
+    }
+    &:active {
+      background-color: transparent;
+    }
+    &:disabled {
+      border-color: var(--ga-color-border-disabled);
+      background-color: transparent;
+      color: var(--ga-color-text-disabled);
+    }
+  }
+  &.ga-button--icon-only {
+    width: calc(0.25rem * 10);
+    padding-inline: calc(0.25rem * 0);
+  }
+}
+.ga-card {
+  border-radius: var(--ga-radius);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--ga-color-border-primary);
+  background-color: #fff;
+  padding: calc(0.25rem * 4);
+  font-size: var(--ga-size-font-md);
+  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+  &.ga-card--selectable {
+    cursor: pointer;
+    &:hover {
+      border-color: var(--ga-color-border-action-hover);
+      background-color: var(--ga-color-surface-action-hover-2);
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--ga-color-border-focus);
+    }
+  }
+  &.ga-card--disabled {
+    border-color: var(--ga-color-border-disabled);
+    background-color: var(--ga-color-surface-disabled);
+    color: var(--ga-color-text-disabled);
+  }
+}
+.ga-checkbox {
+  position: relative;
+  display: inline-flex;
+  gap: calc(0.25rem * 2);
+  .ga-checkbox__native {
+    height: calc(0.25rem * 5);
+    width: calc(0.25rem * 5);
+    flex-shrink: 0;
+    opacity: 0%;
+    &:not(:disabled) {
+      cursor: pointer;
+    }
+  }
+  .ga-checkbox__marker {
+    pointer-events: none;
+    position: absolute;
+    top: calc(0.25rem * 0);
+    left: calc(0.25rem * 0);
+    height: calc(0.25rem * 5);
+    width: calc(0.25rem * 5);
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: var(--ga-color-border-action);
+    color: #fff;
+    .ga-checkbox__marker__indicator-checked, .ga-checkbox__marker__indicator-indeterminate {
+      display: none;
+    }
+  }
+  .ga-checkbox__native:focus-visible ~ .ga-checkbox__marker {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+    outline-offset: 2px;
+    outline-color: var(--ga-color-border-focus);
+  }
+  .ga-checkbox__native:not(:disabled):hover ~ .ga-checkbox__marker {
+    border-color: var(--ga-color-border-action-hover);
+    background-color: var(--ga-color-surface-action-hover-2);
+  }
+  .ga-checkbox__native:checked ~ .ga-checkbox__marker {
+    background-color: var(--ga-color-surface-action);
+    .ga-checkbox__marker__indicator-checked {
+      display: block;
+    }
+  }
+  .ga-checkbox__native:indeterminate ~ .ga-checkbox__marker {
+    background-color: var(--ga-color-surface-action);
+    .ga-checkbox__marker__indicator-indeterminate {
+      display: block;
+    }
+  }
+  .ga-checkbox__native:not(:disabled):checked:hover ~ .ga-checkbox__marker, .ga-checkbox__native:not(:disabled):indeterminate:hover ~ .ga-checkbox__marker {
+    background-color: var(--ga-color-surface-action-hover);
+  }
+  .ga-checkbox__native:disabled ~ .ga-checkbox__marker {
+    border-color: var(--ga-color-border-disabled);
+    background-color: var(--ga-color-surface-disabled);
+    color: var(--ga-color-text-disabled);
+  }
+  &.ga-checkbox--invalid .ga-checkbox__marker {
+    border-color: var(--ga-color-border-error);
+    background-color: var(--ga-color-surface-error);
+    color: var(--ga-color-border-error);
+  }
+  .ga-checkbox__label {
+    min-height: calc(0.25rem * 5);
+    font-size: var(--ga-size-font-md);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+    --tw-leading: calc(0.25rem * 5);
+    line-height: calc(0.25rem * 5);
+    &:empty {
+      display: none;
+    }
+  }
+}
+.ga-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.25rem * 2);
+  .ga-form-field__label {
+    padding-inline: calc(0.25rem * 1);
+    font-size: var(--ga-size-font-md);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+    --tw-leading: calc(0.25rem * 5);
+    line-height: calc(0.25rem * 5);
+    --tw-font-weight: 500;
+    font-weight: 500;
+  }
+  .ga-form-field__info {
+    display: flex;
+    align-items: center;
+    gap: calc(0.25rem * 1);
+    font-size: var(--ga-size-font-xs);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1));
+    letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
+  }
+}
+.ga-input {
+  display: flex;
+  height: calc(0.25rem * 10);
+  width: calc(0.25rem * 50);
+  flex-direction: row;
+  align-items: center;
+  gap: calc(0.25rem * 2);
+  border-radius: var(--ga-radius);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--ga-color-border-primary);
+  background-color: var(--ga-color-bg-primary);
+  padding-inline: calc(0.25rem * 3);
+  padding-block: calc(0.25rem * 2);
+  font-size: var(--ga-size-font-md);
+  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+  &:has(input:hover), &:is(input:hover) {
+    border-color: var(--ga-color-border-action-hover);
+    &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
+      background-color: var(--ga-color-surface-action-hover-2);
+    }
+  }
+  &:has(input:disabled), &:is(input:disabled) {
+    border-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-surface-disabled);
+    color: var(--ga-color-text-disable-selected);
+  }
+  &:has(input:focus), &:is(input:focus) {
+    border-color: var(--ga-color-border-focus);
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+    outline-color: var(--ga-color-border-focus);
+  }
+  &.ga-input--invalid {
+    border-color: var(--ga-color-border-error);
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+    outline-color: var(--ga-color-border-error);
+    &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
+      background-color: var(--ga-color-surface-error);
+    }
+  }
+  input {
+    height: calc(0.25rem * 6);
+    width: 100%;
+    min-width: calc(0.25rem * 0);
+    --tw-leading: calc(0.25rem * 6);
+    line-height: calc(0.25rem * 6);
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  &:is(input) {
+    min-width: calc(0.25rem * 0);
+    --tw-leading: calc(0.25rem * 6);
+    line-height: calc(0.25rem * 6);
+  }
+}
+.ga-notification {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: calc(0.25rem * 4);
+  border-radius: var(--ga-radius);
+  border-style: var(--tw-border-style);
+  border-width: 2px;
+  border-color: var(--ga-color-border-primary);
+  background-color: var(--ga-color-surface-primary);
+  padding-top: calc(0.25rem * 2);
+  padding-right: calc(0.25rem * 2);
+  padding-bottom: calc(0.25rem * 4);
+  padding-left: calc(0.25rem * 4);
+  font-size: var(--ga-size-font-md);
+  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+  &.ga-notification--information {
+    border-color: var(--ga-color-border-information);
+    background-color: var(--ga-color-surface-information);
+  }
+  &.ga-notification--success {
+    border-color: var(--ga-color-border-success);
+    background-color: var(--ga-color-surface-success);
+  }
+  &.ga-notification--error {
+    border-color: var(--ga-color-border-error);
+    background-color: var(--ga-color-surface-error);
+  }
+  &.ga-notification--warning {
+    border-color: var(--ga-color-border-warning);
+    background-color: var(--ga-color-surface-warning);
+  }
+  .ga-notification__icon {
+    margin-top: calc(0.25rem * 2);
+    flex-shrink: 0;
+  }
+  .ga-notification__description {
+    padding-right: calc(0.25rem * 2);
+  }
+  .ga-notification__heading {
+    display: flex;
+    min-height: calc(0.25rem * 10);
+    flex-direction: row;
+    align-items: center;
+    gap: calc(0.25rem * 2);
+  }
+  .ga-notification__title {
+    flex: 1;
+    --tw-font-weight: 700;
+    font-weight: 700;
+  }
+  .ga-notification__title-actions {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: row;
+  }
+}
+.ga-menu {
+  display: flex;
+  min-width: calc(0.25rem * 36);
+  flex-direction: column;
+  align-items: stretch;
+  border-radius: var(--ga-radius);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--ga-color-border-primary);
+  background-color: var(--ga-color-surface-primary);
+  .ga-menu__item {
+    display: flex;
+    height: calc(0.25rem * 9);
+    cursor: pointer;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(0.25rem * 2);
+    padding-inline: calc(0.25rem * 3);
+    padding-block: calc(0.25rem * 2);
+    text-align: left;
+    font-size: var(--ga-size-font-md);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+    --tw-leading: 1;
+    line-height: 1;
+    --tw-font-weight: 500;
+    font-weight: 500;
+    color: var(--ga-color-text-action);
+    &:first-child {
+      border-top-left-radius: var(--ga-radius);
+      border-top-right-radius: var(--ga-radius);
+    }
+    &:hover {
+      background-color: var(--ga-color-surface-action-hover-2);
+      color: var(--ga-color-text-action-hover);
+    }
+    &:active {
+      background-color: var(--ga-color-surface-action);
+      color: var(--ga-color-text-on-action);
+    }
+  }
+  .ga-menu__separator {
+    margin-left: calc(0.25rem * 3);
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--ga-color-border-primary);
+  }
+  .ga-menu__title {
+    padding-inline: calc(0.25rem * 3);
+    padding-top: calc(0.25rem * 3);
+    padding-bottom: calc(0.25rem * 2);
+    font-size: var(--ga-size-font-sm);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, 0);
+    --tw-font-weight: 600;
+    font-weight: 600;
+    color: var(--ga-color-text-disable-selected);
+  }
+}
+.ga-radio-button {
+  position: relative;
+  display: inline-flex;
+  cursor: pointer;
+  gap: calc(0.25rem * 2);
+  .ga-radio-button__native {
+    height: calc(0.25rem * 5);
+    width: calc(0.25rem * 5);
+    flex-shrink: 0;
+    cursor: pointer;
+    opacity: 0%;
+    &:disabled {
+      cursor: default;
+    }
+  }
+  .ga-radio-button__marker {
+    pointer-events: none;
+    position: absolute;
+    top: calc(0.25rem * 0);
+    left: calc(0.25rem * 0);
+    height: calc(0.25rem * 5);
+    width: calc(0.25rem * 5);
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: var(--ga-color-border-action);
+    color: #fff;
+  }
+  .ga-radio-button__native:focus-visible ~ .ga-radio-button__marker {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+    outline-offset: 2px;
+    outline-color: var(--ga-color-border-focus);
+  }
+  .ga-radio-button__native:not(:disabled):hover ~ .ga-radio-button__marker {
+    border-color: var(--ga-color-border-action-hover);
+    background-color: var(--ga-color-surface-action-hover-2);
+  }
+  .ga-radio-button__native:checked ~ .ga-radio-button__marker {
+    background-color: var(--ga-color-surface-action);
+    &::after {
+      position: absolute;
+      top: calc(1/2 * 100%);
+      left: calc(1/2 * 100%);
+      display: block;
+      height: calc(0.25rem * 2);
+      width: calc(0.25rem * 2);
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+      border-radius: calc(infinity * 1px);
+      background-color: #fff;
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
+  .ga-radio-button__native:not(:disabled):checked:hover ~ .ga-radio-button__marker {
+    background-color: var(--ga-color-surface-action-hover);
+  }
+  .ga-radio-button__native:disabled ~ .ga-radio-button__marker {
+    border-color: var(--ga-color-border-disabled);
+    background-color: var(--ga-color-surface-disabled);
+    color: var(--ga-color-text-disabled);
+  }
+  .ga-radio-button__label {
+    min-height: calc(0.25rem * 4);
+    font-size: var(--ga-size-font-md);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+    --tw-leading: calc(0.25rem * 5);
+    line-height: calc(0.25rem * 5);
+  }
+}
+.ga-segmented-control {
+  display: inline-flex;
+  height: calc(0.25rem * 10);
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  font-size: var(--ga-size-font-md);
+  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+  .ga-segmented-control__button {
+    display: inline-flex;
+    height: calc(0.25rem * 10);
+    align-items: center;
+    justify-content: center;
+    gap: calc(0.25rem * 2);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+    border-color: var(--ga-color-neutral-30);
+    background-color: #fff;
+    padding-inline: calc(0.25rem * 4);
+    vertical-align: middle;
+    --tw-leading: calc(0.25rem * 1);
+    line-height: calc(0.25rem * 1);
+    --tw-font-weight: 500;
+    font-weight: 500;
+    color: var(--ga-color-cyan-80);
+    &:first-of-type {
+      border-top-left-radius: var(--ga-radius);
+      border-bottom-left-radius: var(--ga-radius);
+    }
+    &:last-of-type {
+      border-top-right-radius: var(--ga-radius);
+      border-bottom-right-radius: var(--ga-radius);
+      border-right-style: var(--tw-border-style);
+      border-right-width: 1px;
+    }
+    &.ga-segmented-control__button--selected {
+      background-color: var(--ga-color-cyan-80);
+      --tw-font-weight: 600;
+      font-weight: 600;
+      color: var(--ga-color-orange-10);
+    }
+    &:not( .ga-segmented-control__button--selected, .ga-segmented-control__button--disabled, :disabled ) {
+      cursor: pointer;
+      &:hover {
+        background-color: var(--ga-color-surface-action-hover-2);
+      }
+      &:active {
+        background-color: #fff;
+      }
+    }
+    &.ga-segmented-control__button--disabled, &:disabled {
+      border-color: var(--ga-color-neutral-30);
+      background-color: var(--ga-color-neutral-10);
+      color: var(--ga-color-grey-40);
+    }
+  }
+}
+.ga-text-area {
+  display: flex;
+  width: calc(0.25rem * 50);
+  flex-direction: row;
+  align-items: center;
+  gap: calc(0.25rem * 2);
+  border-radius: var(--ga-radius);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--ga-color-border-primary);
+  background-color: var(--ga-color-bg-primary);
+  font-size: var(--ga-size-font-md);
+  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+  &:has(textarea:hover) {
+    border-color: var(--ga-color-border-action-hover);
+  }
+  &:has(textarea:disabled) {
+    border-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-surface-disabled);
+    color: var(--ga-color-text-disable-selected);
+  }
+  &:has(textarea:focus) {
+    border-color: var(--ga-color-border-focus);
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+    outline-color: var(--ga-color-border-focus);
+  }
+  &.ga-text-area--invalid {
+    border-color: var(--ga-color-border-error);
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+    outline-color: var(--ga-color-border-error);
+    &:has(textarea:not(:placeholder-shown)) {
+      background-color: var(--ga-color-surface-error);
+    }
+  }
+  textarea {
+    width: 100%;
+    min-width: calc(0.25rem * 0);
+    padding-inline: calc(0.25rem * 3);
+    padding-block: calc(0.25rem * 2);
+    --tw-leading: calc(0.25rem * 6);
+    line-height: calc(0.25rem * 6);
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+}
+.ga-tooltip {
+  position: relative;
+  max-width: calc(0.25rem * 100);
+  border-radius: var(--ga-radius);
+  background-color: var(--ga-color-surface-action-hover);
+  padding: calc(0.25rem * 2);
+  font-size: var(--ga-size-font-md);
+  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+  color: var(--ga-color-text-on-action);
+  &.ga-tooltip--top-start, &.ga-tooltip--top-center, &.ga-tooltip--top-end, &.ga-tooltip--bottom-start, &.ga-tooltip--bottom-center, &.ga-tooltip--bottom-end, &.ga-tooltip--left-start, &.ga-tooltip--left-center, &.ga-tooltip--left-end, &.ga-tooltip--right-start, &.ga-tooltip--right-center, &.ga-tooltip--right-end {
+    &::before {
+      content: var(--tw-content);
+      position: absolute;
+    }
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
+  &.ga-tooltip--top-start, &.ga-tooltip--top-center, &.ga-tooltip--top-end {
+    margin-bottom: calc(0.25rem * 2);
+  }
+  &.ga-tooltip--bottom-start, &.ga-tooltip--bottom-center, &.ga-tooltip--bottom-end {
+    margin-top: calc(0.25rem * 2);
+  }
+  &.ga-tooltip--left-start, &.ga-tooltip--left-center, &.ga-tooltip--left-end {
+    margin-right: calc(0.25rem * 2);
+  }
+  &.ga-tooltip--right-start, &.ga-tooltip--right-center, &.ga-tooltip--right-end {
+    margin-left: calc(0.25rem * 2);
+  }
+  &.ga-tooltip--top-start::before, &.ga-tooltip--top-center::before, &.ga-tooltip--top-end::before {
+    bottom: calc(0.25rem * -2);
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 8px;
+    border-top-style: var(--tw-border-style);
+    border-top-width: 8px;
+    border-inline-color: transparent;
+    border-top-color: var(--ga-color-surface-action-hover);
+  }
+  &.ga-tooltip--bottom-start::before, &.ga-tooltip--bottom-center::before, &.ga-tooltip--bottom-end::before {
+    top: calc(0.25rem * -2);
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 8px;
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 8px;
+    border-inline-color: transparent;
+    border-bottom-color: var(--ga-color-surface-action-hover);
+  }
+  &.ga-tooltip--top-start::before, &.ga-tooltip--bottom-start::before {
+    left: calc(0.25rem * 4);
+  }
+  &.ga-tooltip--top-center::before, &.ga-tooltip--bottom-center::before {
+    left: calc(1/2 * 100%);
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  &.ga-tooltip--top-end::before, &.ga-tooltip--bottom-end::before {
+    right: calc(0.25rem * 4);
+  }
+  &.ga-tooltip--left-start::before, &.ga-tooltip--left-center::before, &.ga-tooltip--left-end::before {
+    right: calc(0.25rem * -2);
+    border-block-style: var(--tw-border-style);
+    border-block-width: 8px;
+    border-left-style: var(--tw-border-style);
+    border-left-width: 8px;
+    border-block-color: transparent;
+    border-left-color: var(--ga-color-surface-action-hover);
+  }
+  &.ga-tooltip--right-start::before, &.ga-tooltip--right-center::before, &.ga-tooltip--right-end::before {
+    left: calc(0.25rem * -2);
+    border-block-style: var(--tw-border-style);
+    border-block-width: 8px;
+    border-right-style: var(--tw-border-style);
+    border-right-width: 8px;
+    border-block-color: transparent;
+    border-right-color: var(--ga-color-surface-action-hover);
+  }
+  &.ga-tooltip--left-start::before, &.ga-tooltip--right-start::before {
+    top: calc(0.25rem * 4);
+  }
+  &.ga-tooltip--left-center::before, &.ga-tooltip--right-center::before {
+    top: calc(1/2 * 100%);
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  &.ga-tooltip--left-end::before, &.ga-tooltip--right-end::before {
+    bottom: calc(0.25rem * 4);
+  }
+  .ga-tooltip__title {
+    --tw-font-weight: 600;
+    font-weight: 600;
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@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-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}