/* Example:
Graphics
*/ .tabs tabs { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .tab { @extend %nav-all; @extend %header-3; display: block; position: relative; padding: space(20) space(24); background-color: rgba(0,0,0,0); margin: 0; color: $color-text-inactive; transition: color $transition-quick; opacity: 0.9; &:selected { color: $color-text; .tab__indicator { background-color: $color-border-solid; } &:hover { cursor: default; } } .rmlui-window:not([mouse-active]) &:focus { animation: $focus-anim-border; &:selected .tab__indicator { animation: $focus-anim-bg; } } &:focus, &:hover { cursor: pointer; color: $color-text; opacity: 1; } } .tab__indicator { position: absolute; background-color: rgba(0, 0, 0, 0); right: 0; bottom: 2dp; left: 0; height: 2dp; }