.navigation { position: fixed; bottom: 0; left: 0; width: 374px; height: 55px; padding: 0 15px; background: #fff; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05); ul { height: 55px; padding-top: 11px; overflow-x: auto; white-space: nowrap; } li { display: inline-block; width: 34px; height: 34px; border: 1px solid #09f; border-radius: 50%; margin-right: 20px; color: #09f; font-size: 18px; text-align: center; line-height: 34px; &.active { color: #fff; background-color: #09f; } &.correct { background-color: #2CDBAF; border-color: #2CDBAF; color: #fff; } &.error { border-color: #E64949; color: #fff; background-color: #E64949; } &.unselect { border: 1px solid #E64949; color: #E64949; } } }