_popover.scss

//
// Copyright IBM Corp. 2016, 2023
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use '../../config' as *;
@use '../../layer' as *;
@use '../../theme';
@use '../../utilities/box-shadow' as *;
@use '../../utilities/button-reset';
@use '../../utilities/component-reset';
@use '../../utilities/custom-property';
@use '../../utilities/high-contrast-mode' as *;
@use '../../utilities/focus-outline' as *;
@use '../../utilities/' as *;
@use '../../utilities/convert';
@use '../../utilities/layout';

/// The Popover component is used for triggering a pop-up next to a trigger
/// element, typically a button, in a given direction. It is made up of several
/// parts and includes a handful of modifiers to change the appearance.
///
/// The parts of a popover include:
///   The popover container `.cds-popover-container`
///   This container contains the trigger and the popover and is used to
///   coordinate positioning relative to the trigger button
///
///   The popover
///   This is an intermediate container that is used for the
///   `filter: drop-shadow()` effect on the popover content and the caret. It is
///   an absolutely positioned container that matches the dimensions of the
///   container so that popover content and caret can be positioned absolutely.
///
///   Popover content
///   This is the containing element for user-provided content and sets the
///   background and text color for the area.
///
///   Popover caret
///   This caret is an optional modifier that displays a character centered with
///   respect to the trigger element

// The background color for the popover container
$popover-background-color: custom-property.get-var(
  'popover-background-color',
  theme.$layer
);

// The drop shadow value used for the popover container
$popover-drop-shadow: custom-property.get-var('popover-drop-shadow', 'none');

// The border radius value for the popover container
$popover-border-radius: custom-property.get-var('popover-border-radius', 2px);

// The text color used for text placed inside of the popover
$popover-text-color: custom-property.get-var(
  'popover-text-color',
  theme.$text-primary
);

// The distance between the popover container and the triggering element
// Specify the distance between the popover and the trigger. This value must
// have a unit otherwise the `calc()` expression will not work
// stylelint-disable-next-line length-zero-no-unit
$popover-offset: custom-property.get-var('popover-offset', 0rem);

// Customize the dimensions of the caret by specifying its width or height.
// These values will be flipped in left or right directions to have the
// correct dimensions
$popover-caret-width: custom-property.get-var(
  'popover-caret-width',
  convert.to-rem(12px)
);
$popover-caret-height: custom-property.get-var(
  'popover-caret-height',
  convert.to-rem(6px)
);

@mixin popover {
  // Container
  .#{$prefix}--popover-container {
    position: relative;
    display: inline-block;
  }

  /// Modifiers

  // High contrast modifier
  .#{$prefix}--popover--high-contrast .#{$prefix}--popover {
    @include custom-property.declaration(
      'popover-background-color',
      theme.$background-inverse
    );
    @include custom-property.declaration(
      'popover-text-color',
      theme.$text-inverse
    );
  }

  // Drop shadow modifier
  .#{$prefix}--popover--drop-shadow .#{$prefix}--popover {
    @include custom-property.declaration(
      'popover-drop-shadow',
      drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))
    );
  }

  // Caret tip modifier
  .#{$prefix}--popover--caret {
    @include custom-property.declaration(
      'popover-offset',
      convert.to-rem(10px)
    );
  }

  // Popover, this element contains both the caret and the popover content
  .#{$prefix}--popover {
    position: absolute;
    z-index: z('floating');
    filter: $popover-drop-shadow;
    inset: 0;
    pointer-events: none;
  }

  // Popover content
  .#{$prefix}--popover-content {
    @include component-reset.reset;

    position: absolute;
    z-index: z('floating');
    display: none;
    border-radius: $popover-border-radius;
    background-color: $popover-background-color;
    color: $popover-text-color;
    inline-size: max-content;
    max-inline-size: convert.to-rem(368px);
    pointer-events: auto;
  }

  .#{$prefix}--popover--open
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    display: block;
  }

  // We use a pseudo element inside of the popover to create a space between the
  // target and the popover. This helps in situations like toolcarets where you do
  // not want the toolcaret to disappear when the user moves from the target to
  // the popover.
  .#{$prefix}--popover-content::before {
    position: absolute;
    display: none;
    content: '';
  }

  .#{$prefix}--popover--open
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content::before {
    display: block;
  }

  // Popover caret
  .#{$prefix}--popover-caret {
    position: absolute;
    z-index: z('floating');
    display: none;
    background-color: $popover-background-color;
    // We use `will-change: transform` to prevent antialiasing when our caret
    // has subpixel rendering. When this happens, a single pixel line appears
    // between the caret and popover-content that we would like to avoid
    will-change: transform;
  }

  .#{$prefix}--popover--open
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret {
    display: block;
  }

  .#{$prefix}--popover--tab-tip
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret {
    display: none;
  }

  //-----------------------------------------------------------------------------
  // Bottom
  //-----------------------------------------------------------------------------

  // Popover content placement
  .#{$prefix}--popover--bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-block-end: 0;
    inset-inline-start: 50%;
    transform: translate(-50%, calc(100% + $popover-offset));
  }

  [dir='rtl']
    .#{$prefix}--popover--bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    transform: translate(50%, calc(100% + $popover-offset));
  }

  .#{$prefix}--popover--bottom-left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-block-end: 0;
    inset-inline-start: 0;
    transform: translate(
      calc(-1 * $popover-offset),
      calc(100% + $popover-offset)
    );
  }

  [dir='rtl']
    .#{$prefix}--popover--bottom-left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-inline-end: 0;
    inset-inline-start: initial;
  }

  .#{$prefix}--popover--bottom-right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-block-end: 0;
    inset-inline-end: 0;
    transform: translate($popover-offset, calc(100% + $popover-offset));
  }

  [dir='rtl']
    .#{$prefix}--popover--bottom-right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-inline-start: 0;
  }

  // Popover hover area placement
  .#{$prefix}--popover--bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content::before,
  .#{$prefix}--popover--bottom-left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content::before,
  .#{$prefix}--popover--bottom-right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content::before {
    block-size: $popover-offset;
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-inline-start: 0;
    transform: translateY(-100%);
  }

  // Caret placement
  .#{$prefix}--popover--bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  .#{$prefix}--popover--bottom-left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  .#{$prefix}--popover--bottom-right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret {
    block-size: $popover-caret-height;
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    inline-size: $popover-caret-width;
    inset-block-end: 0;
    inset-inline-start: 50%;
    transform: translate(-50%, $popover-offset);
  }

  [dir='rtl']
    .#{$prefix}--popover--bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  [dir='rtl']
    .#{$prefix}--popover--bottom-left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  [dir='rtl']
    .#{$prefix}--popover--bottom-right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret {
    transform: translate(50%, $popover-offset);
  }

  //-----------------------------------------------------------------------------
  // Top
  //-----------------------------------------------------------------------------

  // Popover content placement
  .#{$prefix}--popover--top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translate(-50%, calc(-100% - $popover-offset));
  }

  [dir='rtl']
    .#{$prefix}--popover--top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    transform: translate(50%, calc(-100% - $popover-offset));
  }

  .#{$prefix}--popover--top-left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-block-start: 0;
    inset-inline-start: 0;
    transform: translate(
      calc(-1 * $popover-offset),
      calc(-100% - $popover-offset)
    );
  }

  [dir='rtl']
    .#{$prefix}--popover--top-left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-inline-end: 0;
    inset-inline-start: initial;
  }

  .#{$prefix}--popover--top-right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-block-start: 0;
    inset-inline-end: 0;
    transform: translate($popover-offset, calc(-100% - $popover-offset));
  }

  [dir='rtl']
    .#{$prefix}--popover--top-right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-inline-start: 0;
  }

  // Popover hover area placement
  .#{$prefix}--popover--top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content::before,
  .#{$prefix}--popover--top-left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content::before,
  .#{$prefix}--popover--top-right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content::before {
    block-size: $popover-offset;
    inset-block-end: 0;
    inset-inline-end: 0;
    inset-inline-start: 0;
    transform: translateY(100%);
  }

  // Caret placement
  .#{$prefix}--popover--top > .#{$prefix}--popover > .#{$prefix}--popover-caret,
  .#{$prefix}--popover--top-left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  .#{$prefix}--popover--top-right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret {
    block-size: $popover-caret-height;
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
    inline-size: $popover-caret-width;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translate(-50%, calc(-1 * $popover-offset));
  }

  [dir='rtl']
    .#{$prefix}--popover--top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  [dir='rtl']
    .#{$prefix}--popover--top-left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  [dir='rtl']
    .#{$prefix}--popover--top-right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret {
    transform: translate(50%, calc(-1 * $popover-offset));
  }

  //-----------------------------------------------------------------------------
  // Right
  //-----------------------------------------------------------------------------

  // Popover content placement
  .#{$prefix}--popover--right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-block-start: 50%;
    inset-inline-start: 100%;
    // Add in 0.1px to prevent rounding errors where the content is
    // moved farther than the caret
    transform: translate($popover-offset, -50%);
  }

  .#{$prefix}--popover--right-top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-block-start: 50%;
    inset-inline-start: 100%;
    transform: translate(
      $popover-offset,
      calc(0.5 * $popover-offset * -1 - 16px)
    );
  }

  .#{$prefix}--popover--right-bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-block-end: 50%;
    inset-inline-start: 100%;
    transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
  }

  [dir='rtl']
    .#{$prefix}--popover--right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content,
  [dir='rtl']
    .#{$prefix}--popover--right-bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content,
  [dir='rtl']
    .#{$prefix}--popover--right-top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-inline-end: 100%;
    inset-inline-start: initial;
  }

  // Popover hover area placement
  .#{$prefix}--popover--right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content::before,
  .#{$prefix}--popover--right-top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content::before,
  .#{$prefix}--popover--right-bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content::before {
    inline-size: $popover-offset;
    inset-block-end: 0;
    inset-block-start: 0;
    inset-inline-start: 0;
    transform: translateX(-100%);
  }

  // Caret placement
  .#{$prefix}--popover--right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  .#{$prefix}--popover--right-top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  .#{$prefix}--popover--right-bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret {
    block-size: $popover-caret-width;
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
    inline-size: $popover-caret-height;
    inset-block-start: 50%;
    inset-inline-start: 100%;
    transform: translate(calc($popover-offset - 100%), -50%);
  }

  [dir='rtl']
    .#{$prefix}--popover--right
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  [dir='rtl']
    .#{$prefix}--popover--right-top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  [dir='rtl']
    .#{$prefix}--popover--right-bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret {
    inset-inline-end: 100%;
    inset-inline-start: initial;
  }

  //-----------------------------------------------------------------------------
  // Left
  //-----------------------------------------------------------------------------

  // Popover content placement
  .#{$prefix}--popover--left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-block-start: 50%;
    inset-inline-end: 100%;
    // Add in 0.1px to prevent rounding errors where the content is
    // moved farther than the caret
    transform: translate(calc(-1 * $popover-offset + 0.1px), -50%);
  }

  .#{$prefix}--popover--left-top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-block-start: -50%;
    inset-inline-end: 100%;
    // Add in 0.1px to prevent rounding errors where the content is
    // moved farther than the caret
    transform: translate(
      calc(-1 * $popover-offset),
      calc(-1 * 0.5 * $popover-offset + 16px)
    );
  }

  .#{$prefix}--popover--left-bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-block-end: -50%;
    inset-inline-end: 100%;
    // Add in 0.1px to prevent rounding errors where the content is
    // moved farther than the caret
    transform: translate(
      calc(-1 * $popover-offset),
      calc(0.5 * $popover-offset - 16px)
    );
  }

  [dir='rtl']
    .#{$prefix}--popover--left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content,
  [dir='rtl']
    .#{$prefix}--popover--left-bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content,
  [dir='rtl']
    .#{$prefix}--popover--left-top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    inset-inline-end: initial;
    inset-inline-start: 100%;
  }

  // Popover hover area placement
  .#{$prefix}--popover--left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content::before,
  .#{$prefix}--popover--left-top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content::before,
  .#{$prefix}--popover--left-bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content::before {
    inline-size: $popover-offset;
    inset-block-end: 0;
    inset-block-start: 0;
    inset-inline-end: 0;
    transform: translateX(100%);
  }

  // Caret placement
  .#{$prefix}--popover--left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  .#{$prefix}--popover--left-top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  .#{$prefix}--popover--left-bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret {
    block-size: $popover-caret-width;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    inline-size: $popover-caret-height;
    inset-block-start: 50%;
    inset-inline-end: 100%;
    transform: translate(calc(-1 * $popover-offset + 100%), -50%);
  }

  [dir='rtl']
    .#{$prefix}--popover--left
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  [dir='rtl']
    .#{$prefix}--popover--left-top
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
  [dir='rtl']
    .#{$prefix}--popover--left-bottom
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret {
    inset-inline-end: initial;
    inset-inline-start: 100%;
  }

  //-----------------------------------------------------------------------------
  // Tab Tip Variant
  //-----------------------------------------------------------------------------
  .#{$prefix}--popover--tab-tip
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content {
    border-radius: 0;
  }

  .#{$prefix}--popover--tab-tip .#{$prefix}--popover {
    will-change: filter;
  }

  .#{$prefix}--popover--tab-tip__button {
    @include button-reset.reset;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: convert.to-rem(32px);
    inline-size: convert.to-rem(32px);

    &:focus {
      @include focus-outline('outline');
    }

    &:hover {
      background-color: theme.$layer-hover;
    }
  }

  .#{$prefix}--popover--tab-tip.#{$prefix}--popover--open
    .#{$prefix}--popover--tab-tip__button {
    background: theme.$layer;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  }

  .#{$prefix}--popover--tab-tip.#{$prefix}--popover--open
    .#{$prefix}--popover--tab-tip__button:not(:focus)::after {
    position: absolute;
    z-index: z('floating') + 1;
    background: theme.$layer;
    block-size: 2px;
    content: '';
    inline-size: 100%;
    inset-block-end: 0;
  }

  .#{$prefix}--popover--tab-tip__button svg {
    fill: theme.$icon-primary;
  }
}