@import "variables"; .vn-check { & > .btn { border-radius: 2px; transition: background 250ms; & > .mark { box-sizing: border-box; position: absolute; display: block; border-width: 0; } } & > vn-icon { margin-left: 5px; color: $color-font-secondary; vertical-align: middle; } &.checked > .btn { border-color: transparent; background-color: $color-button; & > .mark { top: 0; left: 4px; transform: rotate(45deg); width: 7px; height: 13px; border: 2px solid $color-font-dark; border-top: 0; border-left: 0; } } &.indeterminate > .btn > .mark { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 2px; border-bottom: 2px solid #666; } &.disabled.checked > .btn { background-color: $color-font-secondary; } }