.safe-zone-manager-sheet {
  gap: 12px;
}

.safe-zone-list {
  display: grid;
  gap: 9px;
}

.safe-zone-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px 36px;
  min-height: 72px;
  padding: 10px 9px 10px 11px;
  align-items: center;
  gap: 9px;
}

.safe-zone-card.is-new {
  animation: safe-zone-card-in var(--motion-transition) cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.safe-zone-card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  background: var(--color-selection-soft);
  border-radius: var(--radius-circle);
  color: var(--color-action-primary);
}

.safe-zone-card-icon--polygon {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.safe-zone-card-icon svg {
  width: 20px;
  height: 20px;
}

.safe-zone-card-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.safe-zone-card-copy strong,
.safe-zone-card-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.safe-zone-card-copy strong {
}

.safe-zone-card-copy small {
  color: var(--color-text-secondary);
}

.safe-zone-enabled {
  display: grid;
  place-items: center;
}

.safe-zone-enabled input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.safe-zone-enabled > span {
  position: relative;
  width: 36px;
  height: 22px;
  background: var(--color-text-disabled);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--motion-control) ease;
}

.safe-zone-enabled > span i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--ref-white);
  border-radius: var(--radius-circle);
  box-shadow: var(--elevation-pressed);
  transition: transform var(--motion-exit) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.safe-zone-enabled input:checked + span {
  background: var(--color-success);
}

.safe-zone-enabled input:checked + span i {
  transform: translateX(14px);
}

.safe-zone-enabled:focus-within > span {
  box-shadow: var(--elevation-input-focus);
}

.safe-zone-edit {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-circle);
  cursor: pointer;
}

.safe-zone-edit svg {
  width: 16px;
  height: 16px;
}

.safe-zone-manager-sheet .primary-button svg {
  width: 18px;
  height: 18px;
}

@keyframes safe-zone-card-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}