@import 'mediawiki.mixins'; @import '../echo.variables'; .mw-echo-ui-toggleReadCircleButtonWidget { &-circle { border-radius: 50%; min-width: 10px; width: @bundle-group-padding; min-height: 10px; height: @bundle-group-padding; margin: @bundle-group-padding; .box-sizing( border-box ); // Mark as read background-color: #36c; border: 0; // Mark as unread &-unread { background-color: #eaecf0; border: 1px solid #71777d; } } &:hover .mw-echo-ui-toggleReadCircleButtonWidget-circle { // Mark as read background-color: #447ff5; // Mark as unread &-unread { background-color: #c8ccd1; } } }