// Lightning Design System 2.28.1
// 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;
  }
}