popover.scss

@import "./new-settings";
@import "./mixins";
@import "./functions";

$block: #{$fd-namespace}-popover;

.#{$block} {

  $fd-popover-top-position: calc(100% + 0.5rem) !default;
  $fd-popover-top-position-noarrow: 100% !default;
  $fd-popover-z-index: map-get($fd-z-index-levels, "top") !default;
  $fd-popover-background-color: var(--sapGroup_ContentBackground) !default;
  $fd-popover-border-radius: var(--sapElement_BorderCornerRadius) !default;
  $fd-popover-box-shadow: var(--sapContent_Shadow2) !default;
  $fd-popover-box-shadow-no-arrow: var(--sapContent_Shadow1) !default;

  $fd-popover-arrow-top-back: -0.5rem !default;
  $fd-popover-arrow-top-front: calc(-0.5rem + 1px) !default;

  $fd-popover-arrow-width: 1rem !default;
  $fd-popover-arrow-height: 0.5rem !default;
  $fd-popover-arrow-width-half: $fd-popover-arrow-width/2 !default;
  $fd-popover-arrow-offset: 0.5rem !default;
  $fd-popover-arrow-color: var(--sapContent_ForegroundBorderColor) !default;

  $fd-popover-transition-params: $fd-animation-speed !default;

  $fd-popover-body-shadow-offset: var(--sapGroup_BorderWidth) !default;

  // POPOVER HEADER
  $fd-popover-header-height: 2.75rem !default;
  $fd-popover-header-height--compact: 2.5rem !default;
  $fd-popover-header-background: var(--sapPageHeader_Background);
  $fd-popover-header-box-shadow: var(--sapContent_HeaderShadow);
  $fd-popover-header-padding: 0 0.5rem !default;

  // POPOVER SUBHEADER
  $fd-popover-subheader-height: 2.75rem !default;
  $fd-popover-subheader-height--compact: 2rem !default;

  // POPOVER FOOTER
  $fd-popover-footer-height: 2.75rem !default;
  $fd-popover-footer-height--compact: 2.5rem !default;
  $fd-popover-footer-background: var(--sapPageFooter_Background);
  $fd-popover-footer-border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
  $fd-popover-footer-padding: 0 0.5rem !default;

  @include fd-reset();

  position: relative;
  display: inline-block;

  &__control {
    @include fd-reset();
    @include action-cursor();

    position: relative;
    margin-left: 0;

    &.#{$fd-namespace}-input:last-child {
      margin-bottom: 0;
    }

    @include fd-disabled() {
      pointer-events: none;
    }
  }

  &__body {
    @include fd-reset();

    border: none;
    position: absolute;
    white-space: nowrap;
    box-shadow: $fd-popover-box-shadow;
    z-index: $fd-popover-z-index;
    border-radius: $fd-popover-border-radius;
    background: $fd-popover-background-color;
    opacity: 1;
    visibility: visible;
    left: $fd-popover-body-shadow-offset;
    top: $fd-popover-top-position;
    transition: all $fd-popover-transition-params;
    transform: translateY(0);

    @include fd-rtl() {
      left: auto;
      right: $fd-popover-body-shadow-offset;

      &::before {
        right: $fd-popover-arrow-offset;
      }

      &::after {
        right: $fd-popover-arrow-offset;
      }
    }

    &::before {
      @include triangle($fd-popover-arrow-width $fd-popover-arrow-height, $fd-popover-background-color, up);

      content: "";
      position: absolute;
      top: $fd-popover-arrow-top-front;
      left: $fd-popover-arrow-offset;
      z-index: $fd-popover-z-index + 2;
    }

    &::after {
      @include triangle($fd-popover-arrow-width $fd-popover-arrow-height, $fd-popover-arrow-color, up);

      content: "";
      position: absolute;
      top: $fd-popover-arrow-top-back;
      left: $fd-popover-arrow-offset;
      z-index: $fd-popover-z-index + 1;
    }

    &-header {
      & > *:first-child {
        border-radius: $fd-popover-border-radius $fd-popover-border-radius 0 0;
      }
    }

    &-footer {
      & > * {
        border-radius: 0 0 $fd-popover-border-radius $fd-popover-border-radius;
      }
    }

    &--left {
      right: auto;
      left: $fd-popover-body-shadow-offset;

      @include fd-rtl() {
        right: $fd-popover-body-shadow-offset;
        left: auto;

        &::before,
        &::after {
          right: $fd-popover-arrow-offset;
          left: unset;
        }
      }

      &::before,
      &::after {
        left: $fd-popover-arrow-offset;
      }
    }

    &--right {
      left: auto;
      right: $fd-popover-body-shadow-offset;

      @include fd-rtl() {
        right: auto;
        left: $fd-popover-body-shadow-offset;

        &::before,
        &::after {
          left: $fd-popover-arrow-offset;
          right: unset;
        }
      }

      &::before,
      &::after {
        left: auto;
        right: $fd-popover-arrow-offset;
      }
    }

    &--no-arrow {
      box-shadow: $fd-popover-box-shadow-no-arrow;
      top: $fd-popover-top-position-noarrow;

      &::before,
      &::after {
        display: none;
      }

      &.#{$block}__body--left {
        left: $fd-popover-body-shadow-offset;
        right: auto;

        @include fd-rtl() {
          right: $fd-popover-body-shadow-offset;
          left: auto;
        }
      }

      &.#{$block}__body--right {
        right: $fd-popover-body-shadow-offset;
        left: auto;

        @include fd-rtl() {
          left: $fd-popover-body-shadow-offset;
          right: auto;
        }
      }
    }

    &--dropdown {
      display: -ms-grid;
      -ms-grid-columns: max-content;
      width: max-content;
      border-top-left-radius: 0;
      border-top-right-radius: 0;

      &-fill {
        max-width: 37.5rem;
        width: calc(100% - #{$fd-popover-body-shadow-offset} * 2);
      }
    }

    &[aria-hidden="true"],
    &.is-hidden {
      z-index: 1;
      opacity: 0;
      visibility: hidden;
    }
  }

  &--input-message-group {
    .#{$block}__body,
    .#{$block}__body--no-arrow,
    .#{$block}__popper,
    .#{$block}__popper--no-arrow {
      box-shadow: none;
      border: none;
      margin-top: -0.25rem;
    }
  }

  &__popper {
    @include fd-reset();

    border: none;
    position: absolute;
    white-space: nowrap;
    box-shadow: $fd-popover-box-shadow;
    z-index: $fd-popover-z-index;
    border-radius: $fd-popover-border-radius;
    background: $fd-popover-background-color;
    opacity: 1;

    &--no-arrow {
      margin: 0 !important;

      .#{$block}__arrow {
        display: none;
      }
    }

    &--input-message-group {
      box-shadow: none;
      border: none;
      margin-top: -0.25rem !important;
    }

    .#{$block}__arrow {
      @include fd-reset();

      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent;

      &::after {
        position: absolute;
        content: "";
        border-style: solid;
        border-color: transparent;
      }
    }

    &[x-out-of-boundaries] {
      display: none;
    }

    &[x-placement^="top"] {
      margin-bottom: $fd-popover-arrow-height;

      .#{$block}__arrow {
        bottom: -$fd-popover-arrow-height;
        margin: 0 $fd-popover-arrow-width-half;
        border-width: $fd-popover-arrow-height $fd-popover-arrow-width-half 0 $fd-popover-arrow-width-half;
        border-top-color: $fd-popover-arrow-color;

        &::after {
          bottom: 1px;
          margin: 0 (-$fd-popover-arrow-width-half);
          border-width: $fd-popover-arrow-height $fd-popover-arrow-width-half 0 $fd-popover-arrow-width-half;
          border-top-color: $fd-popover-background-color;
        }
      }
    }

    &[x-placement^="bottom"] {
      margin-top: $fd-popover-arrow-height;

      .#{$block}__arrow {
        top: -$fd-popover-arrow-height;
        margin: 0 $fd-popover-arrow-width-half;
        border-width: 0 $fd-popover-arrow-width-half $fd-popover-arrow-height $fd-popover-arrow-width-half;
        border-bottom-color: $fd-popover-arrow-color;

        &::after {
          top: 1px;
          margin: 0 (-$fd-popover-arrow-width-half);
          border-width: 0 $fd-popover-arrow-width-half $fd-popover-arrow-height $fd-popover-arrow-width-half;
          border-bottom-color: $fd-popover-background-color;
        }
      }
    }

    &[x-placement^="left"] {
      margin-right: $fd-popover-arrow-height;

      .#{$block}__arrow {
        right: -$fd-popover-arrow-height;
        margin: $fd-popover-arrow-width-half 0;
        border-width: $fd-popover-arrow-width-half 0 $fd-popover-arrow-width-half $fd-popover-arrow-height;
        border-left-color: $fd-popover-arrow-color;

        &::after {
          right: 1px;
          margin: -$fd-popover-arrow-width-half 0;
          border-width: $fd-popover-arrow-width-half 0 $fd-popover-arrow-width-half $fd-popover-arrow-height;
          border-left-color: $fd-popover-background-color;
        }
      }
    }

    &[x-placement^="right"] {
      margin-left: $fd-popover-arrow-height;

      .#{$block}__arrow {
        left: -$fd-popover-arrow-height;
        margin: $fd-popover-arrow-width-half 0;
        border-width: $fd-popover-arrow-width-half $fd-popover-arrow-height $fd-popover-arrow-width-half 0;
        border-right-color: $fd-popover-arrow-color;

        &::after {
          left: 1px;
          margin: -$fd-popover-arrow-width-half 0;
          border-width: $fd-popover-arrow-width-half $fd-popover-arrow-height $fd-popover-arrow-width-half 0;
          border-right-color: $fd-popover-background-color;
        }
      }
    }
  }
}