@import '../../../stylesheets/defaults'

$fb-label-transition = 0.1s

+prefix-classes('mp-fb-btn-')
  .feedback
    align-items center
    display flex
    flex-direction row
    font-size-small()
    font-weight $weight-medium

    &.animate-buttons
      animation feedback-buttons 0.25s ease-out forwards

    &.animate-thank-you
      animation feedback-thank-you 2.5s ease-in-out forwards

    .option
      align-items center
      color $grey-500
      cursor pointer
      display flex
      margin-right 18px
      transition color 0.3s

      &.bad
        .icon
          margin-top 4px

      &.good
        .icon
          margin-top 1px

      .text
        margin-left 2px

      svg-icon
        display block
      svg-icon-style(base-color: $grey-500, hover-color: $mp-blue, speed: $fb-label-transition, size: 18px)
      &:hover
        color $mp-blue

    .option:last-child
      margin-right 0

    .thank-you
      color $grey-500
      display flex
      flex-direction column
      justify-content center

@keyframes feedback-buttons
  0%
    opacity 1
  100%
    opacity 0

@keyframes feedback-thank-you
  0%
    opacity 0
  25%
    opacity 1
  75%
    opacity 1
  100%
    opacity 0