@import "partials/variables.sass"
@import "partials/chord-colors.sass"

@import "partials/loading.sass"
@import "partials/fav.sass"
@import "partials/flash-message.sass"
@import "partials/navbar.sass"
@import "partials/tabbar.sass"
@import "partials/footer.sass"
@import "partials/login.sass"
@import "partials/notification.sass"
@import "partials/shared-buttons.sass"
@import "partials/about.sass"
@import "partials/terms.sass"
@import "partials/changelog.sass"
@import "partials/search.sass"
@import "partials/score-editor.sass"
@import "partials/score-controls.sass"
@import "partials/score-header.sass"
@import "partials/score-footer.sass"
@import "partials/score-card.sass"
@import "partials/user-card.sass"
@import "partials/user-page.sass"

.user-icon
  border-radius: 50%
  &.has-border
    border: 8px solid #fff
    box-shadow: 0 0 0 2px #eaeaea

.wide-button
  display: block
  width: 100%

.animate-button
  transition: opacity .3s ease-in-out

.message-body
  border-radius: 0
  &.bordered
    border: 1px solid #a0ca30
    border-radius: 4px
  &.has-icon
    display: flex
    align-items: center
    .icon
      opacity: .5
      margin-right: .6rem

.twitter-tl
  margin: 3em auto 0
  width: max-content

.can-click
  cursor: pointer
  pointer-events: all !important

section.section
  padding-top: 2rem
  margin-bottom: 1em

@media screen and (min-width: $tablet)
  .section.root-section
    display: flex
    flex-direction: column

@media screen and (max-width: $mobile - 1)
  .section.root-section
    .container
      width: 100%

@media screen and (max-width: $tablet - 1)
  .twitter-tl
    width: auto
