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

/**
 * Container of the utility panel
 *
 * @selector .slds-utility-panel
 * @restrict .slds-utility-bar_container div
 */
.slds-utility-panel {
  position: fixed;
  bottom: $line-height-button;
  width: rem(340px);
  height: rem(480px);
  border-radius: $border-radius-medium $border-radius-medium 0 0;
  border: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border}) {
    bottom: none;
  }
  background: var(--slds-g-color-neutral-base-100, #{$color-background-docked-panel});
  transform: translateY(100%);

  /**
   * @selector .slds-is-open
   * @restrict .slds-utility-panel
   * @modifier
   */
  &.slds-is-open {
    box-shadow: $shadow-docked;
    transform: translateY(0);
  }
}

/**
  * Header that contains an icon, title and panel actions such as minimizing the panel
  *
  * @selector .slds-utility-panel__header
  * @restrict .slds-utility-panel div
  */
.slds-utility-panel__header {
  background: var(--slds-g-color-neutral-base-100, #{$color-background-docked-panel-header});
  border-bottom: $border-width-thick solid $brand-primary;
  border-radius: $border-radius-medium $border-radius-medium 0 0;
  padding: $spacing-x-small $spacing-small;
}

/**
  * Area that contains the utility panel feature
  *
  * @selector .slds-utility-panel__body
  * @restrict .slds-utility-panel div
  */
.slds-utility-panel__body {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  overflow: auto;
}