/**
 * @file
 * Cards and tone tiles.
 */

:where(.gdrfad-dds) .dds-card,
.gdrfad-dds-embedded .dds-card {
  position: relative;
  border: 1px solid var(--surface-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-surface);
  box-shadow: var(--elevation-1);
}

:where(.gdrfad-dds) .dds-card--interactive,
.gdrfad-dds-embedded .dds-card--interactive {
  transition: transform var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

:where(.gdrfad-dds) .dds-card--interactive:hover,
.gdrfad-dds-embedded .dds-card--interactive:hover {
  border-color: var(--primary-primary);
  box-shadow: var(--elevation-3);
  transform: translateY(-2px);
}

:where(.gdrfad-dds) .dds-card--selected,
.gdrfad-dds-embedded .dds-card--selected {
  border: 2px solid var(--primary-primary);
  background: var(--primary-primary-variant);
}

:where(.gdrfad-dds) .dds-tone-tile,
.gdrfad-dds-embedded .dds-tone-tile {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-sm);
  background: var(--neutral-neutral-variant);
  color: var(--neutral-on-neutral-variant);
}

:where(.gdrfad-dds) .dds-tone-tile .dds-icon,
.gdrfad-dds-embedded .dds-tone-tile .dds-icon {
  inline-size: 24px;
  block-size: 24px;
}

:where(.gdrfad-dds) .dds-tone-tile--primary,
.gdrfad-dds-embedded .dds-tone-tile--primary {
  background: var(--primary-primary-variant);
  color: var(--primary-on-primary-variant);
}

:where(.gdrfad-dds) .dds-tone-tile--secondary,
.gdrfad-dds-embedded .dds-tone-tile--secondary {
  background: var(--secondary-secondary-variant);
  color: var(--secondary-on-secondary-variant);
}

:where(.gdrfad-dds) .dds-tone-tile--info,
.gdrfad-dds-embedded .dds-tone-tile--info {
  background: var(--info-info-variant);
  color: var(--info-on-info-variant);
}

:where(.gdrfad-dds) .dds-tone-tile--success,
.gdrfad-dds-embedded .dds-tone-tile--success {
  background: var(--success-success-variant);
  color: var(--success-on-success-variant);
}

:where(.gdrfad-dds) .dds-tone-tile--warning,
.gdrfad-dds-embedded .dds-tone-tile--warning {
  background: var(--warning-warning-variant);
  color: var(--warning-on-warning-variant);
}

:where(.gdrfad-dds) .dds-tone-tile--error,
.gdrfad-dds-embedded .dds-tone-tile--error {
  background: var(--error-error-variant);
  color: var(--error-on-error-variant);
}