@layer components {

  /* Show/hide switch (shared/_eye): an open eye while shown, struck through and dim while hidden. */
  .eye-toggle {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    color: var(--color-ink-muted);
    background: none;
    border: 0;
    cursor: pointer;

    &:hover {
      color: var(--color-ink);
    }

    &[aria-pressed="true"] .eye__slash {
      display: none;
    }

    &[aria-pressed="false"] {
      opacity: 0.55;
    }

    /* Always shown (the active floor). */
    &:disabled {
      cursor: default;
      opacity: 0.35;
    }
  }

  .eye {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}