// Buttons .btn { @include control-transition(); appearance: none; background: $bg-color-light; border: $border-width solid $primary-color; border-radius: $border-radius; color: $primary-color; cursor: pointer; display: inline-block; font-size: $font-size; height: $control-size; line-height: $line-height; outline: none; padding: $control-padding-v $control-padding-h; text-align: center; text-decoration: none; user-select: none; vertical-align: middle; white-space: nowrap; &:focus { @include control-shadow(); } &:focus, &:hover { background: $secondary-color; border-color: $primary-color-dark; text-decoration: none; } &:active, &.active { background: $primary-color-dark; border-color: darken($primary-color-dark, 5%); color: $light-color; text-decoration: none; &.loading { &::after { border-bottom-color: $light-color; border-left-color: $light-color; } } } &[disabled], &:disabled, &.disabled { cursor: default; opacity: .5; pointer-events: none; } // Button Primary &.btn-primary { background: $primary-color; border-color: $primary-color-dark; color: $light-color; &:focus, &:hover { background: darken($primary-color-dark, 2%); border-color: darken($primary-color-dark, 5%); color: $light-color; } &:active, &.active { background: darken($primary-color-dark, 4%); border-color: darken($primary-color-dark, 7%); color: $light-color; } &.loading { &::after { border-bottom-color: $light-color; border-left-color: $light-color; } } } // Button Link &.btn-link { background: transparent; border-color: transparent; color: $link-color; &:focus, &:hover, &:active, &.active { color: $link-color-dark; } } // Button Sizes &.btn-sm { font-size: $font-size-sm; height: $control-size-sm; padding: $control-padding-v-sm $control-padding-h * .75; } &.btn-lg { font-size: $font-size-lg; height: $control-size-lg; padding: $control-padding-v-lg $control-padding-h * 1.5; } // Button Block &.btn-block { display: block; width: 100%; } // Button Action &.btn-action { width: $control-size; padding-left: 0; padding-right: 0; &.btn-sm { width: $control-size-sm; } &.btn-lg { width: $control-size-lg; } } // Button Clear &.btn-clear { background: transparent; border: 0; color: currentColor; height: $unit-4; line-height: $unit-4; margin-left: $unit-1; margin-right: -2px; opacity: .45; padding: 0 2px; text-decoration: none; width: $unit-4; &:hover { opacity: .85; } &::before { content: "\2715"; } } } // Button groups .btn-group { display: inline-flex; flex-wrap: wrap; .btn { flex: 1 0 auto; &:first-child:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } &:not(:first-child):not(:last-child) { border-radius: 0; margin-left: -$border-width; } &:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: -$border-width; } &:focus, &:hover, &:active, &.active { z-index: $zindex-0; } } &.btn-group-block { display: flex; .btn { flex: 1 0 0; } } }