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

/**
 * @summary Panel component
 *
 * @name base
 * @selector .slds-panel
 * @restrict div
 * @support dev-ready
 * @variant
 */
.slds-panel {
  background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  border-radius: $border-radius-medium;
  overflow-y: auto;

  &.slds-is-editing {
    box-shadow: $shadow-drop-down;
  }
}

/**
  * Contains sub sections of a panel
  *
  * @selector .slds-panel__section
  * @restrict .slds-panel div
  * @required
  */
.slds-panel__section {
  padding: $spacing-medium;
}

/**
  * Contains form actions at the bottom of a panel
  *
  * @selector .slds-panel__actions
  * @restrict .slds-panel div
  * @required
  */
.slds-panel__actions {
  padding: $spacing-small;
}

/**
 * @summary Header element of a panel
 * @selector .slds-panel__header
 * @restrict .slds-panel div
 */
.slds-panel__header {
  display: flex;
  position: relative;
  align-items: center;
  padding: $spacing-small;
  border-bottom: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
}

/**
 * @summary Modifier that notifies panel header that something other than a title and close button exist
 * @selector .slds-panel__header_custom
 * @restrict .slds-panel__header
 * @modifier
 */
.slds-panel__header_custom {
  padding: $spacing-small $spacing-medium;
}

/**
  * @summary Close button of a panel
  * @selector .slds-panel__close
  * @restrict .slds-panel .slds-button
  */
.slds-panel__close {

  &:first-child {
    margin-right: $spacing-x-small;
  }

  &:last-child {
    margin-left: $spacing-x-small;
  }
}

/**
 * @summary Back button of a panel drilled in
 * @selector .slds-panel__back
 * @restrict .slds-panel .slds-button
 */
.slds-panel__back {

  &:first-child {
    margin-right: $spacing-x-small;
  }

  &:last-child {
    margin-left: $spacing-x-small;
  }
}

.slds-panel__close,
.slds-panel__back {
  flex-shrink: 0;
}

/**
 * @summary Adjusts styling when the title of the header is centered
 * @selector .slds-panel__header_align-center
 * @restrict .slds-panel__header
 * @modifier
 */
.slds-panel__header_align-center {
  padding: $spacing-small $spacing-xx-large;

  .slds-panel__header-title {
    text-align: center;
  }

  .slds-panel__close {
    position: absolute;
    right: $spacing-small;
    left: auto;
    top: 50%;
    margin-top: (($square-icon-small-boundary * 0.5) * -1);
  }

  .slds-panel__back {
    position: absolute;
    left: $spacing-small;
    right: auto;
    top: 50%;
    margin-top: (($square-icon-small-boundary * 0.5) * -1);
  }
}

/**
 * @summary Container for secondary actions that affect the entire panel
 * @selector .slds-panel__header-actions
 * @restrict .slds-panel__header div
 */
.slds-panel__header-actions {
  display: flex;
  flex-shrink: 0; // Prevent actions from shrinking and fix layout in IE11
  align-items: center;
  margin-left: $spacing-x-small;

  .slds-panel__close {
    // Zero out margins if in header-actions, otherwise leave pre-existing margins so legacy panel__close works
    margin-left: 0;
    margin-right: 0;
  }
}

/**
 * @summary Body element of a panel
 * @selector .slds-panel__body
 * @restrict .slds-panel div
 */
.slds-panel__body {
  padding: $spacing-small;
}

/**
  * @summary Title of the header panel
  * @selector .slds-panel__header-title
  * @restrict .slds-panel__header h2
  */
.slds-panel__header-title {
  text-align: start;
  width: 100%;
}

/**
 * @summary Modifier that changes the display of a panel to dock to the viewport
 * @selector .slds-panel_docked
 * @restrict .slds-panel
 * @modifier
 */
.slds-panel_docked {
  position: relative;
  min-width: $size-small;
  height: 100%;
  border-radius: 0;
  display: none;

  /**
   * @summary Toggles visibility of panel
   * @selector .slds-is-open
   * @restrict .slds-panel_docked
   */
  &.slds-is-open {
    display: block;
  }
}

/**
 * @summary Modifier that changes the position of a panel to the left
 * @selector .slds-panel_docked-left
 * @restrict .slds-panel_docked
 * @modifier
 */
.slds-panel_docked-left {
  box-shadow: $panel-docked-left-shadow;
}

/**
 * @summary Modifier that changes the position of a panel to the right
 * @selector .slds-panel_docked-right
 * @restrict .slds-panel_docked
 * @modifier
 */
.slds-panel_docked-right {
  margin-left: auto;
  box-shadow: $panel-docked-right-shadow;
}

/**
 * @summary Modifier that changes the display of a panel to hide out of view and animate in when opened
 * @selector .slds-panel_animated
 * @restrict .slds-tabs-mobile__container .slds-panel
 * @modifier
 */
.slds-panel_animated {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transform: translate3d(120%, 0, 0);
  transition: transform 300ms ease;
  z-index: $z-index-modal;
}

.slds-tabs-mobile__container {

  .slds-panel_animated {
    position: fixed;
  }
}

.slds-panel_animated.slds-is-open {
  transform: translate3d(0, 0, 0);
}