/**
 * Popovers
 *
 * Add small overlays of content to any element for housing secondary information.
 * You can also customize the position of the arrow.
 *
 * .arrow-top                          - Arrow up.
 * .arrow-right                        - Arrow right.
 * .arrow-bottom                       - Arrow down.
 * .arrow-left                         - Arrow left
 * .arrow-top.arrow-position-left      - Arrow on top, left positioned.
 * .arrow-right.arrow-position-top     - Arrow on the right-hand side, top positioned.
 * .arrow-bottom.arrow-position-right  - Arrow on bottom, right positioned.
 * .arrow-left.arrow-position-bottom   - Arrow on the left-hand side, bottom positioned.
 *
 * Template: popovers
 *
 * Styleguide 50.4
 */
/**
 * Split Popovers
 *
 * Sometimes the outside of your popover has to be drawn by an iFrame or by native code.
 * This is how thats done. <span class="text-warning">The interior corners are not
 * rounded. The rounding must be done by the container.</span>
 *
 * Template: popover-split
 *
 * .desktop    - Used if the rounded corners are supplied in C++. 6 pixels off top and bottom.
 *
 * Styleguide 50.4.1
 */
/**
 * Complex Popovers
 *
 * You can put lots in the popover!
 *
 * Template: popover-nav
 * Data: demo-album
 *
 * Styleguide 50.4.2
 */
.popover {
  position: absolute;
  z-index: 1010;
  display: none;
  text-align: left;
  background-color: $secondary-view-bg-color;
  -webkit-bg-clip: padding-box;
  -moz-bg-clip: padding;
  background-clip: padding-box;
  border-radius: 6px;
  white-space: normal;
}
.popover:not(.no-arrow).arrow-top {
  margin-top: 10px;
}
.popover:not(.no-arrow).arrow-top:before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  border: 10px solid transparent;
}
.popover:not(.no-arrow).arrow-top:before {
  top: -20px;
  left: 50%;
  margin-left: -10px;
  margin-right: -10px;
  border-bottom: 10px solid $primary-border-color;
}
.popover:not(.no-arrow).arrow-bottom {
  margin-bottom: 10px;
}
.popover:not(.no-arrow).arrow-bottom:before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  border: 10px solid transparent;
}
.popover:not(.no-arrow).arrow-bottom:before {
  bottom: -20px;
  left: 50%;
  margin-left: -10px;
  margin-right: -10px;
  border-top: 10px solid $primary-border-color;
}
.popover:not(.no-arrow).arrow-right {
  margin-right: 10px;
}
.popover:not(.no-arrow).arrow-right:before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  border: 10px solid transparent;
}
.popover:not(.no-arrow).arrow-right:before {
  right: -20px;
  top: 50%;
  margin-top: -10px;
  margin-bottom: -10px;
  border-left: 10px solid $primary-border-color;
}
.popover:not(.no-arrow).arrow-left {
  margin-left: 10px;
}
.popover:not(.no-arrow).arrow-left:before {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  border: 10px solid transparent;
}
.popover:not(.no-arrow).arrow-left:before {
  left: -20px;
  top: 50%;
  margin-top: -10px;
  margin-bottom: -10px;
  border-right: 10px solid $primary-border-color;
}
.popover:not(.no-arrow).arrow-position-left:before {
  left: 20px;
}
.popover:not(.no-arrow).arrow-position-right:before {
  left: auto;
  right: 20px;
}
.popover:not(.no-arrow).arrow-position-top:before {
  top: 20px;
}
.popover:not(.no-arrow).arrow-position-bottom:before {
  top: auto;
  bottom: 20px;
}
.popover:not(.no-arrow).arrow-top:before {
  border-bottom-color: $primary-border-color;
}
.popover.arrow-right.arrow-position-top:before {
  border-left-color: $primary-border-color;
}
.popover.arrow-left.arrow-position-top:before {
  border-right-color: $primary-border-color;
}
.popover-title {
  font-family: $font-replacement;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: 200;
  text-transform: normal;
  margin: 0;
  padding: 2px 8px 0;
  line-height: 36px;
  color: $primary-text-color;
  text-align: center;
  background-color: $primary-border-color;
  border-bottom: 1px solid $secondary-text-color;
  border-radius: 5px 5px 0 0;
  position: relative;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popover.closeable .popover-title {
  padding-left: 32px;
}
.popover-nav {
  float: right;
  position: relative;
  left: -50%;
  text-align: left;
  margin: 0 0;
}
.popover-nav .nav {
  position: relative;
  left: 50%;
  border-bottom: 0;
}
.popover-nav .nav > li.active > a {
  color: $primary-text-color;
}
.popover-nav .nav > li.active > a:after {
  background-color: $primary-accent-color;
}
.popover-nav .nav > li > a {
  color: rgba(255, 255, 255, 0.5);
  border-bottom: none;
  margin-top: 2px;
  line-height: 34px;
  font-size: 12px;
}
.popover-nav .nav > li > a:after {
  right: -5px;
  left: -5px;
  width: auto;
}
.popover-nav .nav > li:hover a {
  color: $primary-text-color;
}
.popover-content,
.popover-footer,
.popover-addendum {
  padding: 9px 14px;
}
.popover-footer {
  padding-top: 0;
  text-align: right;
}
.popover-footer .button {
  margin: 0 6px;
}
/**
 * This is a dark area a the bottom of a popover that should be used for fine print.
 */
.popover-addendum {
  background-color: $primary-border-color;
  color: $secondary-text-color;
  font-size: 12px;
  line-height: 16px;
  border-top: 1px solid $main-view-bg-color;
  border-radius: 0 0 5px 5px;
}
/**
 * Modals
 *
 * Styleguide 50.6
 */
/**
 * Modal Popovers
 *
 * A modal is just a special popover case.<br>
 * <a href="popover-modal.html" class="btn btn-info btn-large">See a modal in action</a>
 *
 * Styleguide 50.6.1
 */
.popover.modal {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
  -o-transition: opacity 0.3s linear, top 0.3s ease-out;
  transition: opacity 0.3s linear, top 0.3s ease-out;
  -webkit-box-shadow: 4px 6px 41px 0px rgba($primary-text-color, 0.82);
  -moz-box-shadow: 4px 6px 41px 0px rgba($primary-text-color, 0.82);
  box-shadow: 4px 6px 41px 0px rgba($primary-text-color, 0.82);
}
.popover.modal.fade {
  display: block;
  top: -25%;
}
.popover.modal.fade.in {
  top: 0;
}
.popover.modal.no-scroll {
  overflow: hidden;
}
.modal-open {
  overflow: hidden;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -9999;
  background-color: $secondary-view-bg-color;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.modal-backdrop.fade {
  z-index: 1040;
}
.modal-backdrop.fade.in {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.popover-title .spoticon-x-16 {
  position: absolute;
  right: 3px;
  top: 3px;
}
.popover.modal {
  left: 50%;
  top: 50%;
  right: auto;
  width: 560px;
  margin-left: -280px;
  max-height: 465px;
  margin-top: -232px;
  bottom: auto;
}
.popover.modal.fade {
  top: 40%;
}
.popover.modal.fade.in {
  top: 50%;
}
.popover-interior {
  background-color: $secondary-view-bg-color;
  border-radius: 6px;
}
.popover-interior.desktop {
  border-radius: 0;
  overflow: hidden;
}
.popover-interior.desktop .popover-title {
  margin-top: -6px;
  border-radius: 0;
}
.popover-interior.desktop .popover-content {
  padding-bottom: 3px;
}
.popover-interior.desktop .popover-footer {
  padding-bottom: 12px;
}
/**
 * Generic modal
 *
 * A generic modal with a slight drop shadow and the ability to show a standardized title.
 *
 * Markup: <div class="modal modal-generic no-scroll">
 *   <div class="modal-generic-title">A title</div>
 *   <div class="modal-generic-content">And some content</div>
 * </div>
 *
 * Styleguide 50.6.2
 */
.modal-generic {
  background-color: $secondary-view-bg-color;
  border-radius: 6px;
}
.modal-generic .modal-generic-title {
  font-family: $font-replacement;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: 200;
  color: $primary-text-color;
  text-transform: normal;
  background: $primary-border-color;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  text-align: center;
  padding: 10px;
}
.modal-generic .modal-generic-title .modal-dismiss-btn {
  position: absolute;
  right: 3px;
  top: 3px;
}
.modal-generic .modal-generic-content {
  padding: 10px;
}
/**
 * Generic error modal
 *
 * A standardized modal for displaying modal failures.
 *
 * Markup: <div class="modal modal-generic modal-generic-error no-scroll">Something failed to do something.</div>
 *
 * Styleguide 50.6.3
 */
.modal-generic-error {
  text-align: center;
  font-family: $font-replacement;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: 200;
  color: $secondary-text-color;
  text-transform: normal;
  color: $primary-text-color;
  padding: 20px;
}
