$roundH: 40px; $roundW: 200px; $tinyW: 50px; $textW: 120px; $iconM: 5px; $iconW: $roundW - $tinyW - $textW - (2 * $iconM) - 2; .rounds { bottom: 0; position: absolute; right: 0; width: $roundW; z-index: 1; } .round-item { border: 1px solid #d5d5d5; cursor: pointer; font-size: 0; line-height: $roundH; margin-top: 5px; opacity: 0.2; &:hover { opacity: 0.6; } &.active { opacity: 1; .round-icon { visibility: visible; } } } .round-text { display: inline-block; font-size: 13px; width: $textW; } .round-tiny { display: inline-block; font-size: 9px; line-height: $roundH; text-align: center; text-transform: uppercase; vertical-align: top; width: $tinyW; } .round-icon { height: $iconW; margin: ($roundH - $iconW) / 2 $iconM; vertical-align: top; visibility: hidden; width: $iconW; }