// Popdown
//================================================== /

.popdown {
  @include transition(opacity 400ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
  -moz-transform 400ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
  -ms-transform 400ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
  -o-transform 400ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
  -webkit-transform 400ms cubic-bezier(0.17, 0.04, 0.03, 0.94),
  transform 400ms cubic-bezier(0.17, 0.04, 0.03, 0.94));
  @include css3(transform, translate3d(0, -10%, 0));

  background-clip: padding-box;
  background-color: $popupmenu-bg-color;
  border: 1px solid $popupmenu-border-color;
  border-radius: 4px;
  left: -9999px;
  opacity: 0;
  position: absolute;
  top: 0;
  white-space: normal;
  width: 300px;
  box-shadow: $popover-box-shadow;

  h2 {
    color: $font-color-extrahighcontrast;

    .extra {
      color: $font-color;
    }
  }

  .arrow {
    position: absolute;
    z-index: 10;
  }

  .arrow,
  .arrow::after {
    border-width: 12px;
  }

  &.top {
    @include css3(transform, translate3d(0, 10%, 0));

    .arrow {
      border-top-color: $popupmenu-border-color;

      &::after {
        border-top-color: $popupmenu-bg-color;
      }
    }
  }

  &.bottom {
    .arrow {
      border-bottom-color: $popupmenu-border-color;
      top: -13px !important;

      &::after {
        border-bottom-color: $popupmenu-bg-color;
        left: -12px !important;
        top: 1px !important;
      }
    }
  }

  &.visible {
    opacity: 1;
    z-index: 7001;

    @include css3(transform, translate3d(0, 0%, 0));

    &.top {
      @include css3(transform, translate3d(0, 0%, 0));
    }
  }

  // Customized cards/widgets for use inside the popdown
  .card,
  .widget {
    border: 0;
    height: auto;
    margin-bottom: 0;

    .card-footer,
    .widget-footer {
      padding: 0;
    }
  }

  .modal-buttonset {
    height: 48px;
    margin: 0;
    min-height: 48px;
  }
}