// 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

/**
  * @selector .slds-nubbin_top
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_top,
.slds-nubbin--top {
  @include nubbin(top, 'before', inherit);
  @include nubbin(top, $color: inherit);

  &:after {
    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }
}

/**
  * @selector .slds-nubbin_top-left
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_top-left,
.slds-nubbin--top-left,
.slds-nubbin_top-left-corner {
  @include nubbin(top, 'before', inherit);
  @include nubbin(top, $color: inherit);

  &:after {
    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }

  &:before,
  &:after {
    /*! @noflip */
    left: $spacing-large;
    top: (($nubbin-size-default * 0.5) * -1);
  }
}

/**
  * @selector .slds-nubbin_top-right
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_top-right,
.slds-nubbin--top-right,
.slds-nubbin_top-right-corner {
  @include nubbin(top, 'before', inherit);
  @include nubbin(top, $color: inherit);

  &:after {
    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }

  &:before,
  &:after {
    /*! @noflip */
    left: auto;
    /*! @noflip */
    right: $spacing-large;
    top: (($nubbin-size-default * 0.5) * -1);
    /*! @noflip */
    margin-right: (($nubbin-size-default * 0.5) * -1);
  }
}

/**
  * @selector .slds-nubbin_bottom
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_bottom,
.slds-nubbin--bottom {
  @include nubbin(bottom, 'before', inherit);
  @include nubbin(bottom, $color: inherit);

  &:after {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }
}

/**
  * @selector .slds-nubbin_bottom-left
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_bottom-left,
.slds-nubbin--bottom-left,
.slds-nubbin_bottom-left-corner {
  @include nubbin(bottom, 'before', inherit);
  @include nubbin(bottom, $color: inherit);

  &:after {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }

  &:before,
  &:after {
    /*! @noflip */
    left: $spacing-large;
    top: 100%;
    margin-top: (($nubbin-size-default * 0.5) * -1);
  }
}

/**
  * @selector .slds-nubbin_bottom-right
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_bottom-right,
.slds-nubbin--bottom-right,
.slds-nubbin_bottom-right-corner {
  @include nubbin(bottom, 'before', inherit);
  @include nubbin(bottom, $color: inherit);

  &:after {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }

  &:before,
  &:after {
    /*! @noflip */
    left: auto;
    /*! @noflip */
    right: $spacing-large;
    top: 100%;
    margin-top: (($nubbin-size-default * 0.5) * -1);
    /*! @noflip */
    margin-right: (($nubbin-size-default * 0.5) * -1);
  }
}

/**
  * @selector .slds-nubbin_left
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_left,
.slds-nubbin--left {
  @include nubbin(left, 'before', inherit);
  @include nubbin(left, $color: inherit);

  &:after {
    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }
}

/**
  * @selector .slds-nubbin_left-top
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_left-top,
.slds-nubbin--left-top,
.slds-nubbin_left-top-corner {
  @include nubbin(left, 'before', inherit);
  @include nubbin(left, $color: inherit);

  &:after {
    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }

  &:before,
  &:after {
    top: $spacing-large;
  }
}

/**
  * @selector .slds-nubbin_left-bottom
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_left-bottom,
.slds-nubbin--left-bottom,
.slds-nubbin_left-bottom-corner {
  @include nubbin(left, 'before', inherit);
  @include nubbin(left, $color: inherit);

  &:before {
    margin-bottom: -1px;
  }

  &:after {
    box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }

  &:before,
  &:after {
    top: auto;
    bottom: $spacing-medium;
  }
}

/**
  * @selector .slds-nubbin_right
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_right,
.slds-nubbin--right {
  @include nubbin(right, 'before', inherit);
  @include nubbin(right, $color: inherit);

  &:after {
    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }
}

/**
  * @selector .slds-nubbin_right-top
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_right-top,
.slds-nubbin--right-top,
.slds-nubbin_right-top-corner {
  @include nubbin(right, 'before', inherit);
  @include nubbin(right, $color: inherit);

  &:after {
    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }

  &:before,
  &:after {
    top: $spacing-large;
  }
}

/**
  * @selector .slds-nubbin_right-bottom
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_right-bottom,
.slds-nubbin--right-bottom,
.slds-nubbin_right-bottom-corner {
  @include nubbin(right, 'before', inherit);
  @include nubbin(right, $color: inherit);

  &:before {
    margin-bottom: -1px;
  }

  &:after {
    box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }

  &:before,
  &:after {
    top: auto;
    bottom: $spacing-medium;
  }
}

/**
  * @selector .slds-nubbin_top-left-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_top-left-corner {

  border-radius: $border-radius-small $border-radius-medium $border-radius-medium $border-radius-medium;

  &:before,
  &:after {
    /*! @noflip */
    left: $spacing-small;
  }
}

/**
  * @selector .slds-nubbin_bottom-left-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_bottom-left-corner {

  border-radius: $border-radius-medium $border-radius-medium $border-radius-medium $border-radius-small;

  &:before,
  &:after {
    /*! @noflip */
    left: $spacing-small;
  }
}

/**
  * @selector .slds-nubbin_top-right-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_top-right-corner {

  border-radius: $border-radius-medium $border-radius-small $border-radius-medium $border-radius-medium;

  &:before,
  &:after {
    /*! @noflip */
    right: $spacing-small;
  }
}

/**
  * @selector .slds-nubbin_bottom-right-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_bottom-right-corner {

  border-radius: $border-radius-medium $border-radius-medium $border-radius-small $border-radius-medium;

  &:before,
  &:after {
    /*! @noflip */
    right: $spacing-small;
  }
}

/**
  * @selector .slds-nubbin_left-top-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_left-top-corner {

  border-radius: $border-radius-small $border-radius-medium $border-radius-medium $border-radius-medium;

  &:before,
  &:after {
    top: $spacing-small;
  }
}

/**
  * @selector .slds-nubbin_right-top-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_right-top-corner {

  border-radius: $border-radius-medium $border-radius-small $border-radius-medium $border-radius-medium;

  &:before,
  &:after {
    top: $spacing-small;
  }
}

/**
  * @selector .slds-nubbin_left-bottom-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_left-bottom-corner {

  border-radius: $border-radius-medium $border-radius-medium $border-radius-medium $border-radius-small;

  &:before,
  &:after {
    bottom: $spacing-xx-small;
  }
}

/**
  * @selector .slds-nubbin_right-bottom-corner
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_right-bottom-corner {

  border-radius: $border-radius-medium $border-radius-medium $border-radius-small $border-radius-medium;

  &:before,
  &:after {
    bottom: $spacing-xx-small;
  }
}

// -----------------------------------------------------------------------------
// Logical nubbin variants (RFC 1506)
//
// Sibling family of the existing physical nubbins. Positioned with CSS logical
// properties (`inset-inline-*`, `margin-inline-*`) so they flip natively with
// `dir` in both Aura (post-Omakase) and Storybook (raw CSS). Preferred over
// the physical family (`_left`/`_right`/`_top-left`/etc.) for new authored
// markup that should follow reading direction. The physical family stays
// pinned to LTR to preserve backward compatibility for consumers relying on
// its physical-only meaning (e.g. LBC `positionLibrary`).
//
// `box-shadow` offsets are not mirrored by logical properties, so directional
// shadows use a hand-written `@include rtl() { box-shadow: <mirrored> }`,
// matching the SLDS 1 idiom already used in `vertical-navigation/list` and
// `trees/base`.
// -----------------------------------------------------------------------------

/**
  * @selector .slds-nubbin_top-start
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_top-start {
  @include nubbin-logical(top, 'before', inherit);
  @include nubbin-logical(top, $color: inherit);

  &:after {
    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }

  &:before,
  &:after {
    inset-inline-start: $spacing-large;
    top: (($nubbin-size-default * 0.5) * -1);
    margin-inline-start: 0;
  }
}

/**
  * @selector .slds-nubbin_top-end
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_top-end {
  @include nubbin-logical(top, 'before', inherit);
  @include nubbin-logical(top, $color: inherit);

  &:after {
    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }

  &:before,
  &:after {
    inset-inline-start: auto;
    inset-inline-end: $spacing-large;
    top: (($nubbin-size-default * 0.5) * -1);
    margin-inline-start: 0;
    margin-inline-end: (($nubbin-size-default * 0.5) * -1);
  }
}

/**
  * @selector .slds-nubbin_bottom-start
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_bottom-start {
  @include nubbin-logical(bottom, 'before', inherit);
  @include nubbin-logical(bottom, $color: inherit);

  &:after {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }

  &:before,
  &:after {
    inset-inline-start: $spacing-large;
    top: 100%;
    margin-top: (($nubbin-size-default * 0.5) * -1);
    margin-inline-start: 0;
  }
}

/**
  * @selector .slds-nubbin_bottom-end
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_bottom-end {
  @include nubbin-logical(bottom, 'before', inherit);
  @include nubbin-logical(bottom, $color: inherit);

  &:after {
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;
  }

  &:before,
  &:after {
    inset-inline-start: auto;
    inset-inline-end: $spacing-large;
    top: 100%;
    margin-top: (($nubbin-size-default * 0.5) * -1);
    margin-inline-start: 0;
    margin-inline-end: (($nubbin-size-default * 0.5) * -1);
  }
}

/**
  * @selector .slds-nubbin_start
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_start {
  @include nubbin-logical(start, 'before', inherit);
  @include nubbin-logical(start, $color: inherit);

  &:after {
    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;

    @include rtl() {
      box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
    }
  }
}

/**
  * @selector .slds-nubbin_start-top
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_start-top {
  @include nubbin-logical(start, 'before', inherit);
  @include nubbin-logical(start, $color: inherit);

  &:after {
    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;

    @include rtl() {
      box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
    }
  }

  &:before,
  &:after {
    top: $spacing-large;
  }
}

/**
  * @selector .slds-nubbin_start-bottom
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_start-bottom {
  @include nubbin-logical(start, 'before', inherit);
  @include nubbin-logical(start, $color: inherit);

  &:before {
    margin-bottom: -1px;
  }

  &:after {
    box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;

    @include rtl() {
      box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 0.16);
    }
  }

  &:before,
  &:after {
    top: auto;
    bottom: $spacing-medium;
  }
}

/**
  * @selector .slds-nubbin_end
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_end {
  @include nubbin-logical(end, 'before', inherit);
  @include nubbin-logical(end, $color: inherit);

  &:after {
    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;

    @include rtl() {
      box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
    }
  }
}

/**
  * @selector .slds-nubbin_end-top
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_end-top {
  @include nubbin-logical(end, 'before', inherit);
  @include nubbin-logical(end, $color: inherit);

  &:after {
    box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;

    @include rtl() {
      box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16);
    }
  }

  &:before,
  &:after {
    top: $spacing-large;
  }
}

/**
  * @selector .slds-nubbin_end-bottom
  * @restrict .slds-popover, .slds-dropdown
  * @modifier
  * @group nubbins
  */
.slds-nubbin_end-bottom {
  @include nubbin-logical(end, 'before', inherit);
  @include nubbin-logical(end, $color: inherit);

  &:before {
    margin-bottom: -1px;
  }

  &:after {
    box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 0.16);
    z-index: -1;

    @include rtl() {
      box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.16);
    }
  }

  &:before,
  &:after {
    top: auto;
    bottom: $spacing-medium;
  }
}