$tools-item-width = 30px; .side-tools-container { position: relative; transition(); .tools-item { width: $tools-item-width; height: $tools-item-width; font-size: 1.1em; margin-bottom: 3px; color: var(--second-text-color); background: var(--background-color); cursor: pointer; box-shadow: 1px 1px 3px var(--shadow-color); border-right: none; border-radius: 1px; &:hover { transition(); color: var(--background-color); background: var(--primary-color); box-shadow: 2px 2px 6px var(--shadow-color); } +keep-tablet() { width: $tools-item-width * 0.9; height: $tools-item-width * 0.9; font-size: 1.05em; margin-bottom: 2px; } +keep-mobile() { width: $tools-item-width * 0.8; height: $tools-item-width * 0.8; font-size: 1.0em; } } .side-tools-list { opacity: 0; transform: translateX(100%); transition(); .tool-expand-width { +keep-tablet() { display: none; } } &.show { opacity: 1; transform: translateX(0); } } }