codeRIT/hackathon_manager

/*
 * Regular button
 */

.button, input[type=submit]
  @include css4
    color: var(--button--text)
    background: var(--button--background)
    border: 1px solid var(--button--border)
  cursor: pointer
  display: inline-block
  padding: 0.6em 1.3em
  font-size: 15px
  text-transform: uppercase
  font-weight: 600
  text-align: center
  text-decoration: none
  -webkit-appearance: none
  @include transition(150ms, all, ease-in-out, 0ms)
  @include border-radius(3px)
  @include css4
    @include box-shadow(0 2px 15px rgba(var(--button--background), 0.3))

  &.button--with-margin
    margin: 0.5em 0.5em 0.5em 0

  &.small
    font-size: 1rem
    min-width: initial
    padding: 3px 5px
  &:hover, &:focus
    @include css4
      background: var(--button--background--hover)
      border-color: var(--button--border--hover)
      color: var(--button--text--hover)
      outline-color: var(--button--background--hover)
  &:disabled
    color: #bbb
    border: 1px solid #bbb
    @include box-shadow(inset 0 0 0 0)
    background: transparent
    cursor: default

.button-center
  margin-left: auto
  margin-right: auto

.button-outline
  background: transparent
  @include css4
    border: 1px solid var(--white-pure)
  &:hover
    @include css4
      outline-color: var(--primary-light)
      border-color: var(--primary-light)

.button-clean
  background: transparent

.button-overlay
  margin-top: -100px

/*
 * My MLH CTA button
 */
.my-mlh-cta__button
  display: flex
  flex-flow: row nowrap
  padding: 0px
  height: 40px
  align-items: center
  justify-content: space-between
  width: 267px
  margin: 2em auto 2em
  transition: transform color 0.1s ease-out
  box-sizing: content-box

  &:hover
    transform: scale(1.04)
    @include css4
      background: var(--button--background)
      @include box-shadow(0 4px 18px rgba(var(--button--background), 0.35))

.my-mlh-cta__text
  flex: 1
  text-align: center
  padding-left: 2px

.my-mlh-cta__image-wrapper
  background: rgba(255, 255, 255, 0.95)
  display: flex
  align-items: center
  flex-flow: row nowrap
  @include css4
    color: var(--button--background)
  padding: 0px 9px
  justify-content: center
  border-radius: 0 2px 2px 0

.my-mlh-cta__image
  height: 40px
  padding: 13px 0
  width: 90px
  margin-right: 6px

.my-mlh-cta__icon
  transition: transform 0.1s ease-out
  .my-mlh-cta__button:hover &
    transform: scale(1.02) translateX(1px)