@import '../../../css/mixins.sass'

.raisedButton
  cursor: pointer
  max-width: 160px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  height: 35px
  line-height: 35px
  padding: 0px 15px

  font-size: 12px
  text-align: center
  color: $black

  background-color: transparent

  border: 1px solid $ui-line-grey
  border-radius: 2px

  transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)

  &.marginTop
    margin-top: 15px

  &:hover
    position: relative
    z-index: 10
    background-color: $primary-accent-hover
    border-color: $primary-accent
    color: $primary-accent

  &:focus, &:active, &.selected
    background-color: $primary-accent
    color: $white

  &.submitButton
    margin-top: 15px

  &.active
    background-color: $primary-accent
    color: $white

  &.disabled
    pointer-events: none
    opacity: 0.5
    box-shadow: none

  &.primary
    background-color: $primary-accent
    border-width: 0
    color: $white
    max-width: none
    text-transform: uppercase

    font-family: 'Roboto Condensed', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif
    height: 40px
    line-height: 40px
    font-weight: 600
    padding: 0 40px
    font-size: 20px

    &:hover
      background-color: $secondary-accent
      color: $white

    &:focus, &:active, &.selected
      background-color: $secondary-accent
      color: $white
      box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.28)

  &.blueAction
    border-color: $primary-accent
    color: $primary-accent
    &:hover
      background-color: $primary-accent
      color: white

  // Regular
  &.blueActive
    &.active
      background-color: transparent
      border-color: $primary-accent
      color: $primary-accent
    &:hover
      color: $primary-accent

  &.normalHeight
    height: 35px
    line-height: 35px
    padding: 0 15px

  &.fullWidth
    max-width: none

  &.icon
    padding: 0 12px

    i
      font-size: 14px

  &.centered
    margin: 0 auto
