/* Neutral iconography and rollover contract. */

:root {
  --icon-size-dense: 1rem;
  --icon-size-standard: 1.25rem;
  --icon-size-prominent: 1.5rem;
  --icon-stroke-apparent: 1.75px;
  --icon-transition-duration: 120ms;
  --icon-motion-running-duration: 1200ms;
  --icon-motion-retrying-duration: 1000ms;
  --icon-motion-syncing-duration: 1400ms;
  --icon-motion-rollback-duration: 1100ms;
  --icon-motion-detecting-duration: 1800ms;
  --icon-motion-investigating-duration: 1600ms;
  --icon-motion-monitoring-duration: 2200ms;
  --icon-motion-success-duration: 160ms;
  --icon-motion-resolution-duration: 180ms;
  --icon-motion-failure-duration: 140ms;
  --icon-motion-standard-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --icon-motion-confirm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.neutral-icon {
  display: block;
  flex: none;
  color: inherit;
  shape-rendering: geometricPrecision;
}

.neutral-icon[data-size="16"] {
  width: var(--icon-size-dense);
  height: var(--icon-size-dense);
}

.neutral-icon[data-size="20"] {
  width: var(--icon-size-standard);
  height: var(--icon-size-standard);
}

.neutral-icon[data-size="24"] {
  width: var(--icon-size-prominent);
  height: var(--icon-size-prominent);
}

/* Semantic motion wrapper. Add data-motion only while the represented state is active. */
.neutral-icon-motion {
  --icon-motion-size: var(--icon-size-standard);
  --icon-motion-inset: 0.1875rem;
  position: relative;
  display: inline-grid;
  width: var(--icon-motion-size);
  height: var(--icon-motion-size);
  place-items: center;
  color: inherit;
  line-height: 0;
  isolation: isolate;
}

.neutral-icon-motion[data-icon-size="16"] {
  --icon-motion-size: var(--icon-size-dense);
  --icon-motion-inset: 0.1875rem;
}

.neutral-icon-motion[data-icon-size="20"] {
  --icon-motion-size: var(--icon-size-standard);
  --icon-motion-inset: 0.1875rem;
}

.neutral-icon-motion[data-icon-size="24"] {
  --icon-motion-size: var(--icon-size-prominent);
  --icon-motion-inset: 0.25rem;
}

.neutral-icon-motion > * {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

.neutral-icon-motion[data-motion="running"] > * {
  animation: neutral-icon-spin var(--icon-motion-running-duration) linear infinite;
  will-change: transform;
}

.neutral-icon-motion[data-motion="retrying"] > * {
  animation: neutral-icon-spin var(--icon-motion-retrying-duration) linear infinite;
  will-change: transform;
}

.neutral-icon-motion[data-motion="syncing"] > * {
  animation: neutral-icon-spin var(--icon-motion-syncing-duration) linear infinite;
  will-change: transform;
}

.neutral-icon-motion[data-motion="rolling-back"] > * {
  animation: neutral-icon-spin var(--icon-motion-rollback-duration) linear infinite reverse;
  will-change: transform;
}

.neutral-icon-motion[data-motion="detecting"] > * {
  animation: neutral-icon-spin var(--icon-motion-detecting-duration) linear infinite;
  will-change: transform;
}

.neutral-icon-motion[data-motion="investigating"]::after,
.neutral-icon-motion[data-motion="monitoring"]::after {
  position: absolute;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: currentColor;
  will-change: transform, opacity;
}

.neutral-icon-motion[data-motion="investigating"]::after {
  top: var(--icon-motion-inset);
  right: var(--icon-motion-inset);
  left: var(--icon-motion-inset);
  height: 1px;
  animation: neutral-icon-scan var(--icon-motion-investigating-duration) var(--icon-motion-standard-ease) infinite;
}

.neutral-icon-motion[data-motion="monitoring"]::after {
  top: calc(50% - 1px);
  left: var(--icon-motion-inset);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  animation: neutral-icon-sample var(--icon-motion-monitoring-duration) var(--icon-motion-standard-ease) infinite;
}

.neutral-icon-motion[data-motion="success-enter"] > * {
  animation: neutral-icon-confirm var(--icon-motion-success-duration) var(--icon-motion-confirm-ease) both;
}

.neutral-icon-motion[data-motion="resolution-enter"] > * {
  animation: neutral-icon-confirm var(--icon-motion-resolution-duration) var(--icon-motion-confirm-ease) both;
}

.neutral-icon-motion[data-motion="failure-enter"] > * {
  animation: neutral-icon-failure var(--icon-motion-failure-duration) ease-out both;
}

.neutral-icon-motion[data-motion-paused="true"] > *,
.neutral-icon-motion[data-motion-paused="true"]::after {
  animation-play-state: paused;
}

@keyframes neutral-icon-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes neutral-icon-scan {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  12%,
  88% {
    opacity: 0.52;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(var(--icon-motion-size) - var(--icon-motion-inset) - var(--icon-motion-inset) - 1px));
  }
}

@keyframes neutral-icon-sample {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  14%,
  86% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translateX(calc(var(--icon-motion-size) - var(--icon-motion-inset) - var(--icon-motion-inset) - 2px));
  }
}

@keyframes neutral-icon-confirm {
  from {
    opacity: 0.4;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes neutral-icon-failure {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}

.neutral-icon-control,
.neutral-interactive-motif {
  display: inline-grid;
  min-width: var(--target-pointer-min, 2rem);
  min-height: var(--target-pointer-min, 2rem);
  place-items: center;
  padding: 0;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-control, 0.25rem);
  cursor: pointer;
  transition:
    color var(--icon-transition-duration) ease,
    background-color var(--icon-transition-duration) ease,
    border-color var(--icon-transition-duration) ease;
}

.neutral-icon-control:hover:not(:disabled):not([aria-disabled="true"]),
.neutral-interactive-motif:hover:not([aria-disabled="true"]) {
  color: var(--color-cobalt);
  background: var(--color-surface);
  border-color: var(--color-border);
}

.neutral-icon-control:active:not(:disabled):not([aria-disabled="true"]),
.neutral-interactive-motif:active:not([aria-disabled="true"]) {
  color: var(--color-cobalt);
  background: var(--color-ash);
  border-color: var(--color-stone);
}

[data-theme="dark"] .neutral-icon-control:active:not(:disabled):not([aria-disabled="true"]),
[data-theme="dark"] .neutral-interactive-motif:active:not([aria-disabled="true"]) {
  color: var(--color-paper);
  background: var(--color-ink);
  border-color: var(--color-slate);
}

.neutral-icon-control[aria-current="page"],
.neutral-icon-control[aria-pressed="true"],
.neutral-icon-control[data-selected="true"],
.neutral-interactive-motif[aria-current="page"],
.neutral-interactive-motif[aria-pressed="true"],
.neutral-interactive-motif[data-selected="true"] {
  color: var(--color-cobalt);
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: inset 2px 0 0 var(--color-cobalt);
}

.neutral-icon-control:focus-visible,
.neutral-interactive-motif:focus-visible {
  outline: var(--focus-width, 2px) solid var(--color-cobalt);
  outline-offset: var(--focus-offset, 2px);
}

.neutral-icon-control:disabled,
.neutral-icon-control[aria-disabled="true"],
.neutral-interactive-motif[aria-disabled="true"] {
  color: var(--color-slate);
  background: transparent;
  border-color: transparent;
  cursor: not-allowed;
  opacity: 0.55;
}

@media (pointer: coarse) {
  .neutral-icon-control,
  .neutral-interactive-motif {
    min-width: var(--target-touch-min, 2.75rem);
    min-height: var(--target-touch-min, 2.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .neutral-icon-control,
  .neutral-interactive-motif {
    transition-duration: 0ms;
  }

  .neutral-icon-motion[data-motion] > *,
  .neutral-icon-motion[data-motion]::after {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .neutral-icon-motion[data-motion="investigating"]::after,
  .neutral-icon-motion[data-motion="monitoring"]::after {
    display: none;
  }
}