.logo { display: flex; align-items: center; text-decoration: none; font-weight: bold; font-display: auto; font-family: monospace, monospace; img { height: 44px; } &__mark { margin-right: 5px; } &__text { font-size: 1.125rem; } &__cursor { display: inline-block; width: 10px; height: 1rem; background: $light-color; margin-left: 2px; border-radius: 1px; animation: cursor 1s infinite; .dark-theme & { background: $dark-color; } } @media (prefers-reduced-motion: reduce) { &__cursor { animation: none; } } } // // Fading // @keyframes cursor { // 0% { // opacity: 0; // } // 50% { // opacity: 1; // } // 100% { // opacity: 0; // } // } // Blinking @keyframes cursor { 0% { visibility: hidden; } 50% { visibility: hidden; } 100% { visibility: visible; } }