@import '../mixins'; @import '../../stylesheets/variables'; .base { border: none; min-width: 80px; height: 36px; padding: 0 25px; border-radius: 4px; display: flex; justify-content: center; align-items: center; font-family: $inter; font-weight: normal; font-size: 14px; white-space: nowrap; @include light-theme() { background-color: $color-gray-05; color: $color-gray-90; } @include dark-theme() { background-color: $color-gray-75; color: $color-white; } &:disabled { opacity: 0.4; } } .primary { composes: base; @include light-theme() { background-color: $ultramarine-ui-light; color: $color-white; } @include dark-theme() { background-color: $ultramarine-ui-dark; color: $color-white; } } .pill { composes: base; height: 28px; border-radius: 15px; padding: 0 17px; @include light-theme() { color: $color-gray-90; border: 1px solid $color-gray-90; background: transparent; } @include dark-theme() { color: $color-white; border: 1px solid $color-white; background: transparent; } } .pill-primary { composes: pill; @include light-theme() { border: none; background-color: $ultramarine-ui-light; color: $color-white; } @include dark-theme() { border: none; background-color: $ultramarine-ui-dark; color: $color-white; } }