/* Generated by packages/components/scripts/build-components.mjs. Do not edit by hand. */
my-button,
my-badge,
my-card,
my-icon,
my-input,
my-alert,
my-spinner,
my-disclosure,
my-field {
  box-sizing: border-box;
  font-family: var(--semantic-type-body-family, var(--global-type-body));
  color: var(--theme-color-text-default);
}

my-button *,
my-badge *,
my-card *,
my-icon *,
my-input *,
my-alert *,
my-spinner *,
my-disclosure *,
my-field * {
  box-sizing: border-box;
}

.my-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

my-button {
  --my-button-bg: var(--theme-color-action-default-bg);
  --my-button-bg-hover: var(--theme-color-action-default-bg-hover);
  --my-button-text: var(--theme-color-action-default-text);
  --my-button-border-color: var(--theme-color-border-quiet);
  --my-button-padding-x: var(--semantic-space-action-x);
  --my-button-padding-y: var(--semantic-space-action-y);
  --my-button-radius: var(--semantic-radius-control);
  --my-button-font-size: var(--semantic-type-control-size);
  --my-button-font-weight: var(--semantic-type-control-weight);
  display: inline-block;
}

my-button[data-variant="primary"] {
  --my-button-bg: var(--theme-color-action-primary-bg);
  --my-button-bg-hover: var(--theme-color-action-primary-bg-hover);
  --my-button-text: var(--theme-color-action-primary-text);
  --my-button-border-color: transparent;
}

my-button[data-variant="danger"] {
  --my-button-bg: var(--theme-color-action-danger-bg);
  --my-button-bg-hover: var(--theme-color-action-danger-bg-hover);
  --my-button-text: var(--theme-color-action-danger-text);
  --my-button-border-color: transparent;
}

my-button[data-variant="success"] {
  --my-button-bg: var(--theme-color-action-success-bg);
  --my-button-bg-hover: var(--theme-color-action-success-bg-hover);
  --my-button-text: var(--theme-color-action-success-text);
  --my-button-border-color: transparent;
}

my-button[data-size="sm"] {
  --my-button-padding-x: var(--global-space-sm);
  --my-button-padding-y: var(--global-space-xs);
  --my-button-font-size: var(--global-type-size-sm);
}

my-button[data-size="lg"] {
  --my-button-padding-x: var(--global-space-lg);
  --my-button-padding-y: var(--global-space-md);
  --my-button-font-size: var(--global-type-size-lg);
}

.my-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  gap: var(--global-space-xs);
  padding: var(--my-button-padding-y) var(--my-button-padding-x);
  border: var(--semantic-border-control) solid var(--my-button-border-color);
  border-radius: var(--my-button-radius);
  background: var(--my-button-bg);
  color: var(--my-button-text);
  font: inherit;
  font-size: var(--my-button-font-size);
  font-weight: var(--my-button-font-weight);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--semantic-motion-interactive) ease,
    border-color var(--semantic-motion-interactive) ease,
    transform var(--semantic-motion-interactive) ease;
}

.my-button:hover {
  background: var(--my-button-bg-hover);
}

.my-button:active {
  transform: translateY(1px);
}

.my-button:focus-visible,
.my-input__control:focus-visible,
.my-disclosure__summary:focus-visible {
  outline: var(--semantic-border-focus) solid var(--theme-color-focus);
  outline-offset: 2px;
}

.my-button[disabled],
.my-button[aria-disabled="true"] {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
}

.my-button__icon,
.my-button__spinner {
  display: inline-flex;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.my-button__spinner,
.my-spinner__mark {
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--global-radius-pill);
  animation: my-ds-spin 700ms linear infinite;
}

my-badge {
  --my-badge-bg: var(--theme-color-surface-subtle);
  --my-badge-text: var(--theme-color-text-default);
  display: inline-block;
}

my-badge[data-variant="primary"] {
  --my-badge-bg: var(--theme-color-action-primary-bg);
  --my-badge-text: var(--theme-color-action-primary-text);
}

my-badge[data-variant="danger"] {
  --my-badge-bg: var(--theme-color-action-danger-bg);
  --my-badge-text: var(--theme-color-action-danger-text);
}

my-badge[data-variant="success"] {
  --my-badge-bg: var(--theme-color-action-success-bg);
  --my-badge-text: var(--theme-color-action-success-text);
}

my-badge[data-variant="warning"] {
  --my-badge-bg: var(--theme-color-status-warning-bg);
  --my-badge-text: var(--theme-color-status-warning-text);
}

.my-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 var(--global-space-xs);
  border-radius: var(--semantic-radius-badge);
  background: var(--my-badge-bg);
  color: var(--my-badge-text);
  font-size: var(--global-type-size-sm);
  font-weight: var(--global-type-weight-medium);
  line-height: 1;
}

my-card {
  display: block;
  padding: var(--semantic-space-card-padding);
  border: var(--semantic-border-control) solid var(--theme-color-border-quiet);
  border-radius: var(--semantic-radius-surface);
  background: var(--theme-color-surface-raised);
  color: var(--theme-color-text-default);
}

my-card[data-tone="subtle"] {
  background: var(--theme-color-surface-subtle);
}

my-icon,
.my-icon__svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

my-input,
my-field {
  display: grid;
  gap: var(--semantic-space-field-gap);
}

.my-input__label,
.my-field__label {
  color: var(--theme-color-text-loud);
  font-size: var(--global-type-size-sm);
  font-weight: var(--global-type-weight-medium);
}

.my-input__control,
.my-field__control :is(input, select, textarea) {
  width: 100%;
  min-height: 2.5rem;
  padding: var(--semantic-space-action-y) var(--semantic-space-action-x);
  border: var(--semantic-border-control) solid var(--theme-color-border-quiet);
  border-radius: var(--semantic-radius-control);
  background: var(--theme-color-surface-default);
  color: var(--theme-color-text-loud);
  font: inherit;
}

.my-input__control[aria-invalid="true"],
my-field[data-invalid="true"] .my-field__control :is(input, select, textarea) {
  border-color: var(--theme-color-action-danger-text);
}

.my-input__hint,
.my-field__hint,
.my-input__error,
.my-field__error {
  margin: 0;
  font-size: var(--global-type-size-sm);
}

.my-input__hint,
.my-field__hint {
  color: var(--theme-color-text-quiet);
}

.my-input__error,
.my-field__error {
  color: var(--theme-color-action-danger-text);
}

my-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--global-space-sm);
  padding: var(--global-space-md);
  border: var(--semantic-border-control) solid var(--theme-color-border-quiet);
  border-radius: var(--semantic-radius-surface);
  background: var(--theme-color-surface-subtle);
  color: var(--theme-color-text-default);
}

my-alert[data-variant="success"] {
  background: var(--theme-color-action-success-bg);
  color: var(--theme-color-action-success-text);
}

my-alert[data-variant="warning"] {
  background: var(--theme-color-status-warning-bg);
  color: var(--theme-color-status-warning-text);
}

my-alert[data-variant="danger"] {
  background: var(--theme-color-action-danger-bg);
  color: var(--theme-color-action-danger-text);
}

.my-alert__icon {
  margin-top: 0.125rem;
}

.my-alert__heading,
.my-alert__message {
  margin: 0;
}

.my-alert__heading {
  font-weight: var(--global-type-weight-strong);
}

.my-alert__message {
  margin-top: var(--global-space-2xs);
}

my-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

my-spinner[data-size="sm"] .my-spinner__mark {
  width: 1rem;
  height: 1rem;
}

my-spinner[data-size="md"] .my-spinner__mark {
  width: 1.5rem;
  height: 1.5rem;
}

my-spinner[data-size="lg"] .my-spinner__mark {
  width: 2rem;
  height: 2rem;
}

my-disclosure {
  display: block;
  border: var(--semantic-border-control) solid var(--theme-color-border-quiet);
  border-radius: var(--semantic-radius-surface);
  background: var(--theme-color-surface-raised);
}

.my-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--global-space-md);
  border: 0;
  background: transparent;
  color: var(--theme-color-text-loud);
  font: inherit;
  font-weight: var(--global-type-weight-medium);
  cursor: pointer;
}

.my-disclosure__summary[aria-expanded="true"] my-icon {
  transform: rotate(90deg);
}

.my-disclosure__panel {
  padding: 0 var(--global-space-md) var(--global-space-md);
  color: var(--theme-color-text-default);
}

@keyframes my-ds-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .my-button,
  .my-disclosure__summary my-icon {
    transition: none;
  }

  .my-button__spinner,
  .my-spinner__mark {
    animation-duration: 1.6s;
  }
}