@import '../../stylesheets/variables'; @import '../mixins'; .base { display: flex; flex-direction: row; align-items: center; } .input { position: absolute; width: 0; height: 0; opacity: 0; } .checkbox { width: 18px; height: 18px; border-radius: 2px; display: flex; justify-content: center; align-items: center; border: { width: 2px; style: solid; } @include light-theme() { border-color: $color-gray-60; } @include dark-theme() { border-color: $color-gray-25; } } .checkbox-checked { composes: checkbox; border: none; background-color: $ultramarine-ui-light; color: $color-white; } .label { margin-left: 6px; position: relative; top: 1px; user-select: none; }