/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

// NOTE: You can't use @extend that break component independent and topdoc parsing.

// internal variables
var-popover-background-color = $popover-background-color
var-popover-text-color = $popover-text-color
var-popover-arrow-size = 18px
var-popover-arrow-radius = 4px
var-popover-radius = 8px

/*! topdoc
  name: Popover
  class: popover
  markup:
    <div class="popover-mask"></div>
    <div class="popover popover--up" style="bottom:20px;left:50px;">
      <div class="popover__bottom-arrow"></div>
      <div class="popover__content">
        <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
      </div>
    </div>
*/
.popover-mask
  position absolute
  left 0
  right 0
  top 0
  bottom 0
  background-color rgba(0, 0, 0, 0.1)

.popover
  reset-box-model()
  reset-base()
  reset-cursor()
  reset-font()
  position absolute
  width 220px
  min-height 100px

.popover__content
  background-color var-popover-background-color
  border-radius var-popover-radius
  box-shadow 0 2px 16px rgba(0, 0, 0, 0.1)
  color var-popover-text-color
  overflow hidden
  min-height 100px

.popover__content > *
  overflow hidden

popover-arrow()
  content ''
  position absolute
  width var-popover-arrow-size
  height var-popover-arrow-size
  transform-origin 50% 50% 0
  background-color transparent
  background-image linear-gradient(45deg, var-popover-background-color, var-popover-background-color 50%, transparent 50%)
  border-radius 0 0 0 var-popover-arrow-radius

.popover__bottom-arrow
  popover-arrow()
  transform rotate(-45deg)
  bottom 0
  left 50%
  margin-left -(var-popover-arrow-size / 2)px
  margin-bottom -(var-popover-arrow-size / 2)px

.popover__top-arrow
  popover-arrow()
  transform rotate(135deg)
  top 0
  left 50%
  margin-left -(var-popover-arrow-size / 2)px
  margin-top -(var-popover-arrow-size / 2)px

.popover__left-arrow
  popover-arrow()
  transform rotate(45deg)
  top 50%
  left 0
  margin-left -(var-popover-arrow-size / 2)px
  margin-top -(var-popover-arrow-size / 2)px

.popover__right-arrow
  popover-arrow()
  transform rotate(225deg)
  top 50%
  right 0
  margin-right -(var-popover-arrow-size / 2)px
  margin-top -(var-popover-arrow-size / 2)px

/*! topdoc
  name: Popover(down)
  use: Popover
  markup:
    <div class="popover-mask"></div>
    <div class="popover popover--down" style="top:20px;left:50px;">
      <div class="popover__top-arrow"></div>
      <div class="popover__content">
        <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
      </div>
    </div>
*/

/*! topdoc
  name: Popover(left)
  use: Popover
  markup:
    <div class="popover-mask"></div>
    <div class="popover popover--left" style="top:20px;right:20px;">
      <div class="popover__right-arrow"></div>
      <div class="popover__content">
        <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
      </div>
    </div>
*/

/*! topdoc
  name: Popover(right)
  use: Popover
  markup:
    <div class="popover-mask"></div>
    <div class="popover popover--right" style="top:20px;left:20px;">
      <div class="popover__left-arrow"></div>
      <div class="popover__content">
        <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
      </div>
    </div>
*/

/*! topdoc
  name: Android-like Popover
  use: Popover
  markup:
    <div class="popover-mask"></div>
    <div class="popover popover--up popover" style="top:10px;right:10px;">
      <div class="popover__content popover__content--android">
        <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
      </div>
    </div>
*/
.popover__content--android
  border-radius 2px

