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

/**
 * A dialog popover, `.slds-popover`, can be applied to all variants of a dialog
 * popover. It initiates the styles of the popover and enables `.slds-nubbin` to be applied.
 *
 * A dialog popover requires at least one focusable element.
 *
 * @name base
 * @selector .slds-popover
 * @restrict [role="dialog"], [role="tooltip"]
 * @support dev-ready
 * @variant
 */
.slds-popover {
  @include popover($color: var(--slds-g-color-neutral-base-100, #{$color-background-alt}), $shadow: $shadow-drop-down);
  border: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
}

/**
 * @summary Applies styles for meta content of popover
 * @selector .slds-popover__meta
 * @restrict .slds-popover
 */
.slds-popover__meta {
  margin-bottom: $spacing-small;
}

/**
 * @summary Applies styles for primary content area of popover
 * @selector .slds-popover__body
 * @restrict .slds-popover div
 */

.slds-popover__body {
  padding: $spacing-x-small $spacing-small;

  .slds-popover__header {
    padding: 0 0 $spacing-x-small 0;
  }
}

.slds-popover__body,
.slds-popover__header,
.slds-popover__footer {
  position: relative;
  padding: $spacing-x-small $spacing-small;
  word-wrap: break-word;
}

/**
 * @summary Applies styles for top area of popover
 * @selector .slds-popover__header
 * @restrict .slds-popover header, .slds-popover div
 */
.slds-popover__header {
  border-bottom: 0;
}

/**
 * @summary Applies styles for footer area of popover
 * @selector .slds-popover__footer
 * @restrict .slds-popover footer
 */
.slds-popover__footer {
  border-top: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
  background-color: var(--slds-g-color-neutral-base-95, #{$color-background});
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  padding: $spacing-x-small $spacing-small;
}

/**
 * @summary Applies styles to center align content for footer area of a form popover
 * @selector .slds-popover__footer_form
 * @restrict .slds-popover footer
 */
.slds-popover__footer_form {
  text-align: center;
  background: var(--slds-g-color-neutral-base-95, #{$color-background});
  border-radius: 0 0 $border-radius-medium $border-radius-medium;
}

/**
 * @summary Applies a max-height and vertical scrolling to a popover body
 *
 * @selector .slds-popover__body_small
 * @restrict .slds-popover__body
 * @modifier
 * @group body
 */
.slds-popover__body_small {
  max-height: $size-small;
  overflow-y: auto;
}

/**
 * @summary Close button within a popover
 * @selector .slds-popover__close
 * @restrict .slds-popover button
 */
.slds-popover__close {
  position: relative;
  margin: $spacing-xx-small;
  z-index: ($z-index-dialog + 1);
}

/**
 * @summary Width modifier for popover - small
 * @selector .slds-popover_small
 * @restrict .slds-popover
 * @modifier
 * @group width
 */
.slds-popover_small,
.slds-popover--small {
  max-width: $size-small;
}

/**
 * @summary Width modifier for popover - medium
 * @selector .slds-popover_medium
 * @restrict .slds-popover
 * @modifier
 * @group width
 */
.slds-popover_medium,
.slds-popover--medium {
  min-width: $size-medium;
}

/**
 * @summary Width modifier for popover - large
 * @selector .slds-popover_large
 * @restrict .slds-popover
 * @modifier
 * @group width
 */
.slds-popover_large,
.slds-popover--large {
  min-width: $size-large;
  max-width: $max-width-action-overflow-menu;
}

// Remove border if theme modifier is applied
.slds-popover[class*="theme_"],
.slds-popover[class*="theme--"] {
  border: 0;
}

.slds-popover *:last-child {
  margin-bottom: 0;
}

/**
 * @summary Modifier for popover to take 100% width
 * @selector .slds-popover_full-width
 * @restrict .slds-popover
 * @modifier
 * @group width
 */
.slds-popover_full-width {
  width: 100%;
}

/**
 * @summary Modifier to hide a popover
 * @selector .slds-popover_hide
 * @restrict .slds-popover
 */
.slds-popover_hide {
  display: none;
}


/**
* @summary Applies styles for dark variant of popover
* @selector .slds-popover_dark
* @restrict .slds-popover
* @modifier
*/
.slds-popover_dark {
  background-color: $brand-background-dark;
  color: var(--slds-g-color-neutral-base-100, #{$color-text-brand-primary});

  .slds-badge {
    background-color: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  }

  .slds-popover__close {
    color: var(--slds-g-color-neutral-base-100, #{$color-text-brand-primary});
  }

  .slds-icon-text-default {
    fill: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  }

  .slds-popover__footer {
    border-top-color: var(--slds-g-color-brand-base-10, #{$color-border-inverse});
    background-color: var(--slds-g-color-brand-base-20, #{$color-background-alt-inverse});
  }

  .slds-button:focus {
    box-shadow: var(--_slds-g-shadow-outset-focus);
  }
}