// Handwritten text callout with arrow pointing to other content.
//
// .-below            - Callout is positioned below an element.
// .-above            - Callout is positioned above element it's pointing to.
// .-right            - Callout is positioned to the right of element it's pointing to.
// .-dynamic-right    - Callout that starts below or above an item on mobile, but then switches to positon to the right of item.
// .-above-horizontal - Callout is positioned horizontally above the element that it is pointing to without rotation.
// .-white            - White text and arrow (for use on dark backgrounds).
// .-blue             - Blue text and arrow.
//
// Markup:
//   <div class="message-callout {{modifier_class}}">
//     <div class="message-callout__copy">
//       <p>This is something. Mic drop!</p>
//     </div>
//   </div>
//
// Styleguide Message Callout

.message-callout {
  position: relative;

  @include media($tablet) {
    transform: rotate(-3deg);
  }

  .message-callout__copy {
    display: inline-block;
    padding: 18px 9px;
    position: relative;

    @include media($tablet) {
      margin: 0;
    }

    p {
      color: #000;
      font: 27px/1.3 $font-handwritten;
      letter-spacing: 0.03em;
      line-height: 1.1;
      margin: 0;
      text-transform: lowercase;
    }

    &:before {
      content: "";
      display: block;
      position: absolute;
    }
  }

  &.-white {
    .message-callout__copy {
      p {
        color: #fff;
      }
    }
  }

  &.-blue {
    .message-callout__copy {
      p {
        color: $blue;
      }
    }
  }


  // Class indicates callout is positioned below item it's pointing at.
  &.-below {
    padding-top: 18px;

    .message-callout__copy {

      // Arrow Up
      &:before {
        background: neue-asset-url("images/callout/arrow-up-black.png") 50% 50% / 25px no-repeat transparent;
        height: 38px;
        right: -5px;
        top: -15px;
        width: 25px;
      }
    }

    &.-white {
      .message-callout__copy {
        &:before {
          background-image: neue-asset-url("images/callout/arrow-up-white.png");
        }
      }
    }
  }


  // Class indicates callout is positioned above item it's pointing at.
  &.-above {
    .message-callout__copy {
      &:before {
        background: neue-asset-url("images/callout/arrow-down-black.png") 50% 50% / 14px no-repeat transparent;
        height: 50px;
        right: -20px;
        bottom: -15px;
        width: 20px;
      }
    }

    &.-white {
      .message-callout__copy {
        &:before {
          background-image: neue-asset-url("images/callout/arrow-down-white.png");
        }
      }
    }
  }


  &.-right {
    // ## You can set position overrides on the `.message-callout` like this:
    // position: absolute;
    // left: 144px;
    // bottom: 0;

    .message-callout__copy {
      padding-left: 45px;

      &:before {
        background: neue-asset-url("images/callout/arrow-left-black.png") 50% 50% / 35px no-repeat transparent;
        height: 19px;
        left: 0;
        margin-top: -9px;
        right: auto;
        top: 50%;
        width: 38px;
      }
    }

    &.-white {
      .message-callout__copy {
        &:before {
          background-image: neue-asset-url("images/callout/arrow-left-white.png");
        }
      }
    }
  }


  // Class applies to a callout that starts below or above an item on mobile, but then switches to positon to the right of item.
  &.-dynamic-right {
    @include media($tablet) {
      padding-top: 0;

      // ## You can set position overrides on the `.message-callout` like this:
      // position: absolute;
      // left: 144px;

      .message-callout__copy {
        left: 0;
        padding-bottom: 3px;
        padding-top: 3px;
        padding-left: 45px;

        &:before {
          background: neue-asset-url("images/callout/arrow-left-black.png") 50% 50% / 35px no-repeat transparent;
          height: 19px;
          left: 0;
          margin-top: -9px;
          right: auto;
          top: 50%;
          width: 38px;
        }
      }
    }

    @include media($tablet) {
      &.-white {
        .message-callout__copy {
          &:before {
            background-image: neue-asset-url("images/callout/arrow-left-white.png");
          }
        }
      }
    }
  }

  &.-above-horizontal {
    transform: none;

    .message-callout__copy {
      padding: 18px 0px;

      &:before {
        background: neue-asset-url("images/callout/arrow-up-black.png") 50% 50% / 25px no-repeat transparent;
        height: 38px;
        bottom: -20px;
        width: 30px;
        transform: scaleY(-1) scaleX(-1);
      }
    }

    &.-white {
      .message-callout__copy {
        &:before {
          background: neue-asset-url("images/callout/arrow-up-white.png") 50% 50% / 25px no-repeat transparent;
        }
      }
    }

    &.-blue {
      .message-callout__copy {
        &:before {
          background: neue-asset-url("images/callout/arrow-up-blue.png") 50% 50% / 25px no-repeat transparent;
        }
      }
    }
  }


}