// ========================================================================== // Buttons // ========================================================================== // Shared .button, .button__count { position: relative; display: inline-flex; vertical-align: middle; align-items: center; padding: (@spacing-base * 0.75); border-radius: @border-radius-base; box-shadow: 0 1px 1px fade(#000, 10%); background: #fff; border: 0; user-select: none; text-shadow: none; color: @gray; } // Buttons .button { padding-left: @spacing-base; padding-right: @spacing-base; transition: all 0.2s ease; font-weight: @font-weight-bold; &:hover, &:focus { color: @gray-dark; // Remove the underline/border &::after { display: none; } } &:hover { transform: translateY(-1px); box-shadow: 0 2px 2px fade(#000, 10%); } &:focus { outline: 0; } &.tab-focus { .tab-focus(); } &:active { transform: translateY(1px); } } // Button group .button--with-count { display: inline-flex; .button .icon { flex-shrink: 0; } } // Count bubble .button__count { margin-left: (@spacing-base / 2); animation: fadein 0.2s ease; &::before { content: ''; position: absolute; width: 0; height: 0; right: 100%; top: 50%; transform: translateY(-50%); border: @arrow-size solid transparent; border-right-color: #fff; border-left-width: 0; } }