@use "sass:color"; @import "../../../../_theme"; :host { display: inline-block; } .btn { min-height: 40px; font-weight: 700; font-size:15px; min-width:216px; } .btn-primary, .btn-secondary, .btn-danger { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } .btn-outline-primary, .btn-outline-danger { --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } .btn-primary { $primary-disabled-bg: color.mix(white, $primary, $weight: $primary-button-disabled-tint-amount); --bs-btn-hover-bg: #{color.mix(black, $primary, $weight: $primary-button-hover-shade-amount)}; --bs-btn-hover-border-color: #{color.mix(black, $primary, $weight: $primary-button-hover-shade-amount)}; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #{$primary-disabled-bg}; --bs-btn-disabled-border-color: #{$primary-disabled-bg}; --bs-btn-disabled-opacity: 1; } .btn-secondary { $secondary-hover-active-bg: color.mix(black, $secondary, $weight: $secondary-button-hover-active-shade-amount); $secondary-disabled-bg: color.change($secondary, $alpha: $secondary-button-disabled-alpha); --bs-btn-hover-bg: #{$secondary-hover-active-bg}; --bs-btn-hover-border-color: #{$secondary-hover-active-bg}; --bs-btn-active-bg: #{$secondary-hover-active-bg}; --bs-btn-active-border-color: #{$secondary-hover-active-bg}; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #{$secondary-disabled-bg}; --bs-btn-disabled-border-color: #{$secondary-disabled-bg}; --bs-btn-disabled-opacity: 1; } .btn-danger { $danger-disabled-bg: color.change($danger, $alpha: $danger-button-disabled-alpha); --bs-btn-hover-bg: #{$danger-button-hover-active-bg}; --bs-btn-hover-border-color: #{$danger-button-hover-active-bg}; --bs-btn-active-bg: #{$danger-button-hover-active-bg}; --bs-btn-active-border-color: #{$danger-button-hover-active-bg}; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #{$danger-disabled-bg}; --bs-btn-disabled-border-color: #{$danger-disabled-bg}; --bs-btn-disabled-opacity: 1; }