// Lightning Design System 2.264.0
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@mixin nubbin($position: bottom, $location: "after", $color: $color-background-alt, $size: $nubbin-size-default) {

  &:#{$location} {
    @include square($size);
    position: absolute;
    transform: rotate(45deg);
    content: '';
    background-color: $color;

    @if $position == top {
      /*! @noflip */
      left: 50%;
      top: (($size * 0.5) * -1);
      /*! @noflip */
      margin-left: (($size * 0.5) * -1);
    }

    @else if $position == bottom {
      /*! @noflip */
      left: 50%;
      bottom: (($size * 0.5) * -1);
      /*! @noflip */
      margin-left: (($size * 0.5) * -1);
    }

    @else if $position == left {
      top: 50%;
      /*! @noflip */
      left: (($size * 0.5) * -1);
      margin-top: (($size * 0.5) * -1);
    }

    @else if $position == right {
      top: 50%;
      /*! @noflip */
      right: (($size * 0.5) * -1);
      margin-top: (($size * 0.5) * -1);
    }
  }
}

// Logical / RTL-aware sibling of `nubbin()`. Emits the same geometry as the
// physical mixin, but uses CSS logical properties on the inline axis so the
// nubbin flips with `dir` in both Aura (post-Omakase) and Storybook (raw CSS).
// `$position` accepts `top`, `bottom`, `start`, `end` — the inline-axis names
// mirror the `inset-inline-*` vocabulary this mixin emits. Consumers layer
// per-variant offsets on top (see `slds-nubbin_top-start` etc.).
@mixin nubbin-logical($position: bottom, $location: "after", $color: $color-background-alt, $size: $nubbin-size-default) {

  &:#{$location} {
    @include square($size);
    position: absolute;
    transform: rotate(45deg);
    content: '';
    background-color: $color;

    @if $position == top {
      inset-inline-start: 50%;
      top: (($size * 0.5) * -1);
      margin-inline-start: (($size * 0.5) * -1);
    }

    @else if $position == bottom {
      inset-inline-start: 50%;
      bottom: (($size * 0.5) * -1);
      margin-inline-start: (($size * 0.5) * -1);
    }

    @else if $position == start {
      top: 50%;
      inset-inline-start: (($size * 0.5) * -1);
      margin-top: (($size * 0.5) * -1);
    }

    @else if $position == end {
      top: 50%;
      inset-inline-end: (($size * 0.5) * -1);
      margin-top: (($size * 0.5) * -1);
    }
  }
}

@mixin popover($color: $color-background-alt, $shadow: null) {
  position: relative;
  border-radius: $border-radius-medium;
  width: $size-medium;
  min-height: ($nubbin-size-default * 2);
  z-index: var(--slds-c-popover-position-zindex, $z-index-dialog);
  background-color: $color;
  display: inline-block;

  @if $shadow != null {
    box-shadow: $shadow;
  }
}