// ------------------------------------\
// POPOVER / TOOLTIP
// ------------------------------------/

.popover {
  @extend .a-fontSizeXS;
  margin-top: 12px;
  background-color: $yellow-light;
  border: none;
  border-radius: 0;
  box-shadow: $shadow2;

  .arrow {
    box-sizing: border-box;

    &::after {
      border-color: transparent;
    }

    &::before {
      position: absolute;
      top: 7px;
      bottom: 100%;
      left: 50%;
      box-sizing: border-box;
      width: 0;
      height: 0;
      margin-left: 9px;
      content: '';
      border: 6px solid $black;
      border-color: $yellow-light $yellow-light $yellow-light $yellow-light;
      box-shadow: -1px 1px 3px 0 $black-opacity-01;
      transform: rotate(135deg);
      transform-origin: 0 0;
    }
  }

  &.bs-popover-top {
    margin-top: -6px;

    .arrow {
      &::before {
        top: -2px;
        box-shadow: 3px -2px 3px 0 $black-opacity-01;
      }
    }
  }

  &.bs-popover-right {
    margin-left: 12px;

    .arrow {
      &::before {
        top: 4px;
        left: 6px;
        box-shadow: 2px 1px 3px 0 $black-opacity-01;
      }
    }
  }

  &.bs-popover-left {
    margin-right: 12px;

    .arrow {
      &::before {
        top: 4px;
        left: -2px;
        box-shadow: -2px -1px 3px 0 $black-opacity-01;
      }
    }
  }

  .popover-body {
    padding: $spacer;
  }

  // GREEN POPOVER
  &.popover-valid {
    background-color: $green-light;

    .arrow {
      &::before {
        border-color: $green-light $green-light $green-light $green-light;
      }
    }

    .popover-title {
      background-color: $green-light;
    }
  }

  // RED POPOVER
  &.popover-warning {
    background-color: $red-light;

    .arrow {
      &::before {
        border-color: $red-light $red-light $red-light $red-light;
      }
    }

    .popover-title {
      background-color: $red-light;
    }
  }

  // GRAY POPOVER
  &.popover-gray {
    background-color: $grey-light;

    .arrow {
      &::before {
        border-color: $grey-light $grey-light $grey-light $grey-light;
      }
    }

    .popover-title {
      background-color: $gray-light;
    }
  }

  // Footnote popover
  &.footnote {
    background-color: $grey-light;

    .arrow {
      &::before {
        border-color: $grey-light $grey-light $grey-light $grey-light;
      }
    }

    .popover-title {
      background-color: $grey-light;
    }
  }

  // BIG POPOVER
  &.popover-big {
    width: 100%;
    max-width: 100%;
    max-height: 60%;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;

    background-color: $yellow-light;

    h3,
    div {
      &.popover-body {
        padding: 0;

        .container {
          padding: 0;

          .a-modal-body {

            @include media-breakpoint-down( xs ) {
              padding-right: $spacer * 2;
              padding-left: $spacer * 2;
            }
          }
        }

        @include media-breakpoint-down( sm ) {
          width: auto;
        }
      }
    }

    &::before {
      display: none;
    }

    .popover-title {
      background-color: $yellow-light;
    }
  }

}