/* Icon drawing: filled blocks only, no outlines. The shape is picked by the
   data-icon-shape attribute on <html> (square is the default: no attribute
   needed): the blocks carry rx 1.1 and the square shape squares every rect off
   below. The theme icon is picked by data-theme. Set both before first paint so
   there is no flash. */

.ek-icon {
  display: block;
  flex: none;
  --ek-dim: 0.32;
}

[data-theme="dark"] .ek-icon {
  --ek-dim: 0.4;
}

.ek-f {
  fill: currentColor;
}

.ek-fa {
  fill: var(--accent-color, currentColor);
}

.ek-dim {
  opacity: var(--ek-dim);
}

.ek-icon [data-p] {
  transform-box: view-box;
}

:root:not([data-icon-shape="round"]) .ek-icon rect {
  rx: 0.35px;
}

/* Theme icon: the sun (.ek-ol) in the light theme, the moon (.ek-od) in the dark one. */
.ek-od {
  display: none;
}

[data-theme="dark"] .ek-od {
  display: inline;
}

[data-theme="dark"] .ek-ol {
  display: none;
}

/* Response after an action (copied, saved): the glyph shrinks into its own
   centre and a check settles in its place with one overshoot. Back the same
   way round. */
.ek-base {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform var(--dur-enter, 0.45s) var(--ease-settle, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.ek-check {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transform: scale(0);
  transition: transform var(--dur-leave, 0.22s) var(--ease-leave, cubic-bezier(0.4, 0, 1, 1));
}

.ek-icon[data-done="true"] .ek-base {
  transform: scale(0);
  transition: transform var(--dur-leave, 0.22s) var(--ease-leave, cubic-bezier(0.4, 0, 1, 1));
}

.ek-icon[data-done="true"] .ek-check {
  transform: scale(1);
  transition: transform var(--dur-enter, 0.45s) var(--ease-settle, cubic-bezier(0.34, 1.56, 0.64, 1))
    var(--dur-leave, 0.22s);
}

@media (prefers-reduced-motion: reduce) {
  .ek-base,
  .ek-check,
  .ek-icon[data-done="true"] .ek-base,
  .ek-icon[data-done="true"] .ek-check {
    transition: none;
  }
}