@import "../../variables.less";

@{prefix}pointer-wrap {
  position: absolute;

  @{prefix}arrow {
    position: absolute;
    display: block;
    width: 33px;
    left: -10px;
    top: 4px;
    transform: translateY(-100%);

    &.top-left {
      + @{prefix}box {
        border-top-left-radius: 0;
      }
    }

    &.top-middle {
      left: 50%;
      transform: translateY(-100%) translateX(-50%);
    }

    &.top-right {
      right: -13px;
      left: auto;
      + @{prefix}box {
        border-top-right-radius: 0;
      }
    }

    &.bottom,
    &.bottom-left,
    &.bottom-middle,
    &.bottom-right {
      bottom: 2px;
      top: auto;
      transform: rotate(180deg) translateY(-100%);
    }

    &.bottom,
    &.bottom-left {
      left: -13px;
      + @{prefix}box {
        border-bottom-left-radius: 0;
      }
    }

    &.bottom-middle {
      left: 50%;
      transform: rotate(180deg) translateY(-100%) translateX(50%);
    }

    &.bottom-right {
      right: -10px;
      left: auto;
      + @{prefix}box {
        border-bottom-right-radius: 0;
      }
    }

    &.left-top,
    &.left-middle,
    &.left-bottom {
      transform: rotate(-90deg);
      left: -38px;
    }

    &.left,
    &.left-top {
      top: -20px;
      + @{prefix}box {
        border-top-left-radius: 0;
      }
    }

    &.left-middle {
      transform: translateY(-50%) rotate(-90deg);
      top: 50%;
    }

    &.left-bottom {
      top: auto;
      bottom: -17px;
      + @{prefix}box {
        border-bottom-left-radius: 0;
      }
    }

    &.right-top,
    &.right-middle,
    &.right-bottom {
      right: -38px;
      left: auto;
      transform: rotate(90deg);
    }

    &.right,
    &.right-top {
      top: -17px;
      + @{prefix}box {
        border-top-right-radius: 0;
      }
    }

    &.right-middle {
      transform: translateY(-50%) rotate(90deg);
      top: 50%;
    }

    &.right-bottom {
      top: auto;
      bottom: -20px;
      + @{prefix}box {
        border-bottom-right-radius: 0;
      }
    }

    @{prefix}arrow-pointer {
      @arrowPointer: %('data:image/svg+xml;charset=utf-8,%s', escape(%('<svg xmlns="http://www.w3.org/2000/svg" width="33" height="22"><path d="M 13,2 C 15,0 16,0 18,2 L 28,13 C 30,15 30,17 28,17 L 22.5,17 L 3,17 C 1,17 1,15 3,13 Z" fill="%s" stroke="%s" stroke-linejoin="round" transform="translate(0 3)" stroke-width="3"></path></svg>', @tile-bg, @focus-glow)));
      width: 33px;
      height: 22px;
      background-image: url(@arrowPointer);
      filter: drop-shadow(0 0 8px @focus-glow);
      position: relative;
      z-index: 1;
    }

    @{prefix}arrow-neck {
      background: @tile-bg;
      width: 10px;
      height: 27px;
      position: relative;
      z-index: 2;
      margin-top: -1px;
      margin-bottom: -1px;
      transform: translateX(10px) translateY(-3px);
      .box-shadow(6px 0px 0 -3px @focus-glow, -6px 0px 0 -3px @focus-glow, 10px 0 10px -4px @focus-glow, -10px 0 10px -4px @focus-glow;);
    }
  }


  @{prefix}box {
    background: @tile-bg;
    padding: 12px;
    max-width: 300px;
    border-radius: 3px;
    .box-shadow(0px 0px 0px 3px @focus-glow, 0px 0px 12px 4px @focus-glow;);
    z-index: 9;

    @{prefix}ftpo-dismiss {
      position: absolute;
      right: 15px;
      z-index: 1;
      background: @tile-bg;

      &:hover {
        cursor: pointer;
      }
    }

    @{prefix}content {
      position: relative;

      h4 {
        margin: 0 0 5px 0;
        padding: 0;
        font-size: @text-small;
        font-weight: @weight-normal;
        color: @header-dark;
      }

      p {
        margin: 0;
        font-size: @text-smaller;
        font-weight: @weight-light;
        color: @text-base;
      }

      &:focus {
        outline: none;

        &:before {
          background: @top-bar-bg;
        }
      }

      &:before {
        content: '';
        height: 100%;
        width: 3px;
        position: absolute;
        left: -8px;
      }
    }
  }

  &@{prefix}no-arrow {

    @{prefix}arrow {
      display: none;
    }

    @{prefix}box {
      border-top-left-radius: 3px;
    }
  }
}
