@import “../variables/derived-variables.sass” @import “../variables/initial-variables.sass”

$button-width: 80px !default $button-height: 40px !default $button-width-small: $button-width - 20px !default $button-height-small: $button-height - 10px !default $button-width-large: $button-width + 20px !default $button-height-large: $button-height + 20px !default $button-radius: 3px !default $button-padding: 5px !default $button-margin: 2px !default $bg-color: rgba(0, 0, 0, 0) !default

.buttons

display: flex !important
flex-direction: row !important
flex-wrap: wrap !important
justify-content: left !important
align-items: center !important

.btn-small

display: flex
align-items: center !important
justify-content: center !important
min-width: $button-width-small !important
min-height: $button-height-small !important
border-radius: $button-radius !important
padding: $button-padding !important

.btn-large

display: flex
align-items: center !important
justify-content: center !important
min-width: $button-width-large !important
min-height: $button-height-large !important
border-radius: $button-radius !important
padding: $button-padding !important

.button

display: flex
align-items: center !important
justify-content: center !important
min-width: $button-width
min-height: $button-height
border-radius: $button-radius !important
border: none !important
padding: $button-padding !important
margin: $button-margin !important
color: $black-flat
background-color: $white
-webkit-transition: 0.3s ease-in-out !important
transition: 0.3s ease-in-out !important

.button.s-default:hover

background-color: darken($default,5%) !important

.button.s-primary:hover

background-color: darken($primary,5%) !important

.button.s-danger:hover

background-color: darken($danger,5%) !important

.button.s-warning:hover

background-color: darken($warning,5%) !important

.button.s-success:hover

background-color: darken($success,5%) !important

.button.s-info:hover

background-color: darken($info,5%) !important

.button.s-purple:hover

background-color: darken($purple, 5%) !important

.outlined-button

display: flex
align-items: center !important
justify-content: center !important
min-width: $button-width
min-height: $button-height
border-radius: $button-radius !important
border: 1px solid $default !important
padding: $button-padding !important
margin: $button-margin !important
background-color: $bg-color !important
color: $default !important
-webkit-transition: 0.3s ease-in-out !important
transition: 0.3s ease-in-out !important

.outlined-button:hover

background-color: $default !important
color: $white !important

.outlined-button-white

min-width: $button-width
max-width: $button-width + 50px !important
min-height: $button-height
border-radius: $button-radius !important
border: 1px solid $white !important
padding: $button-padding !important
margin: $button-margin !important
background-color: $bg-color !important
color: $white !important
-webkit-transition: 0.3s ease-in-out !important
transition: 0.3s ease-in-out !important

.outlined-button-white:hover

background-color: $white !important
color: #21D4FD !important

.outlined-button-primary

display: flex
align-items: center !important
justify-content: center !important
min-width: $button-width
min-height: $button-height
border-radius: $button-radius !important
border: 1px solid $primary !important
padding: $button-padding !important
margin: $button-margin !important
background-color: $bg-color !important
color: $primary !important
-webkit-transition: 0.3s ease-in-out !important
transition: 0.3s ease-in-out !important

.outlined-button-primary:hover

background-color: $primary !important
color: $white !important

.outlined-button-danger

display: flex
align-items: center !important
justify-content: center !important
min-width: $button-width
min-height: $button-height
border-radius: $button-radius !important
border: 1px solid $danger !important
padding: $button-padding !important
margin: $button-margin !important
background-color: $bg-color !important
color: $danger !important
-webkit-transition: 0.3s ease-in-out !important
transition: 0.3s ease-in-out !important

.outlined-button-danger:hover

background-color: $danger !important
color: $white !important

.outlined-button-warning

display: flex
align-items: center !important
justify-content: center !important
min-width: $button-width
min-height: $button-height
border-radius: $button-radius !important
border: 1px solid $warning !important
padding: $button-padding !important
margin: $button-margin !important
background-color: $bg-color !important
color: $warning !important
-webkit-transition: 0.3s ease-in-out !important
transition: 0.3s ease-in-out !important

.outlined-button-warning:hover

background-color: $warning !important
color: $white !important

.outlined-button-success

display: flex
align-items: center !important
justify-content: center !important
min-width: $button-width
min-height: $button-height
border-radius: $button-radius !important
border: 1px solid $success !important
padding: $button-padding !important
margin: $button-margin !important
background-color: $bg-color !important
color: $success !important
-webkit-transition: 0.3s ease-in-out !important
transition: 0.3s ease-in-out !important

.outlined-button-success:hover

background-color: $success !important
color: $white !important

.outlined-button-info

display: flex
align-items: center !important
justify-content: center !important
min-width: $button-width
min-height: $button-height
border-radius: $button-radius !important
border: 1px solid $info !important
padding: $button-padding !important
margin: $button-margin !important
background-color: $bg-color !important
color: $info !important
-webkit-transition: 0.3s ease-in-out !important
transition: 0.3s ease-in-out !important

.outlined-button-info:hover

background-color: $info !important
color: $white !important

.outlined-button-purple

display: flex
align-items: center !important
justify-content: center !important
min-width: $button-width
min-height: $button-height
border-radius: $button-radius !important
border: 1px solid $purple !important
padding: $button-padding !important
margin: $button-margin !important
background-color: $bg-color !important
color: $purple !important
-webkit-transition: 0.3s ease-in-out !important
transition: 0.3s ease-in-out !important

.outlined-button-purple:hover

background-color: $purple !important
color: $white !important