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

+prefix-classes('mp-share-')
  .button
    font-size-small()
    font-weight $weight-medium
    margin-bottom 3px

    .animations
      align-items center
      display flex

      &.fade-in
        animation mp-share-fade-in 0.15s ease-in

      &.fade-out
        animation mp-share-fade-out 0.15s ease-out

      &.fade-in-out
        animation mp-share-fade-in-out 2.3s ease-in-out

    .label
      margin-left 2px

    .message
      align-items center
      color $grey-500
      display flex
      & > *
        display inline-block

    .click
      cursor pointer
      svg-icon-style(base-color: $grey-500, hover-color: $mp-blue, size: 22px, speed: 0.1s)
      transition color 0.3s
      &:hover
        color $mp-blue

    .success
      svg-icon-style(base-color: $grey-500, size: 22px)

@keyframes mp-share-fade-in
  from
    opacity 0
  to
    opacity 1

@keyframes mp-share-fade-out
  from
    opacity 1
  to
    opacity 0

@keyframes mp-share-fade-in-out
  0%
    opacity 0
  7%
    opacity 1
  93%
    opacity 1
  100%
    opacity 0