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

@import 'deprecate';

/**
 * Intializes docked composer container window
 *
 * @selector .slds-docked_container
 * @restrict div
 */
.slds-docked_container {
  display: flex;
  align-items: flex-end;
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 0 $spacing-large;
  height: $height-docked-bar;
}

/**
 * @variant
 * @name base
 * @selector .slds-docked-composer
 * @restrict section, div
 * @support dev-ready
 */
.slds-docked-composer {
  position: relative;
  border-radius: $border-radius-medium $border-radius-medium 0 0;
  width: 480px;
  height: $height-docked-bar;
  float: left;
  box-shadow: $elevation-inverse-shadow-2;
  border: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border}) {
    bottom: none;
  }
  background-color: var(--slds-g-color-neutral-base-100, #{$color-background-docked-panel});

  /**
   * @selector .slds-has-focus
   * @restrict .slds-docked-composer
   * @modifier
   * @group interaction
   */
  &.slds-has-focus {
    box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
  }

  /**
   * @selector .slds-is-open
   * @restrict .slds-docked-composer
   * @modifier
   * @group visibility
   */
  &.slds-is-open {
    height: 480px;
  }

  /**
   * @selector .slds-is-closed
   * @restrict .slds-docked-composer
   * @modifier
   * @group visibility
   */
  &.slds-is-closed {
    height: $height-docked-bar;

    .slds-docked-composer__body,
    .slds-docked-composer__footer {
      display: none;
    }
  }

  + .slds-docked-composer {
    margin-left: $spacing-large;
  }
}

/**
  * Bar at the top of the composer that contains actionable items to invoke,
  * such as minimizing, popping out the composer and removing the composer.
  *
  * @selector .slds-docked-composer__header
  * @restrict .slds-docked-composer header
  */
.slds-docked-composer__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;
}

.slds-docked-composer__actions .slds-button {
  margin-left: $spacing-small;
}

/**
  * Primary area within docked composer that contains specific task
  *
  * @selector .slds-docked-composer__body
  * @restrict .slds-docked-composer div
  */
.slds-docked-composer__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  overflow: auto;
}

/**
  * @selector .slds-docked-composer__body_form
  * @restrict .slds-docked-composer__body
*/
.slds-docked-composer__body_form,
.slds-docked-composer__body--form {
  justify-content: flex-start;
  padding: $spacing-medium;
}

/**
  * Within the docked composer body, the lead is the first region
  *
  * @selector .slds-docked-composer__lead
  * @restrict .slds-docked-composer div
  */
.slds-docked-composer__lead {
  display: flex;
  background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  padding: $spacing-medium $spacing-x-small;
}

/**
  * Toolbar within the docked composer body
  *
  * @selector .slds-docked-composer__toolbar
  * @restrict .slds-docked-composer div
  */
.slds-docked-composer__toolbar {
  background: var(--slds-g-color-neutral-base-95, #{$color-background});
  padding: $spacing-xx-small $spacing-x-small;
  max-height: 60px;
  overflow-y: auto;
  border: {
    top: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
    bottom: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
  }
}

/**
  * Text input within the docked composer body
  *
  * @selector .slds-docked-composer__input
  * @restrict .slds-docked-composer textarea
  */
.slds-docked-composer__input {
  background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  padding: $spacing-medium;
  min-height: $size-xx-small;
  resize: none;
  line-height: $line-height-text;
  overflow: hidden;
  overflow-y: auto;
}

/**
  * Bar at the bottom of the composer that contains actionable items to
  * invoke, such as saving, associating relationships and adding content.
  *
  * @selector .slds-docked-composer__footer
  * @restrict .slds-docked-composer footer
  */
.slds-docked-composer__footer {
  display: flex;
  background: var(--slds-g-color-neutral-base-95, #{$color-background});
  padding: $spacing-small $spacing-x-small;
  border-top: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
}

/**
  * When the number of docked composer exceed the width of the viewport, this class modifies the docked composer styles
  *
  * @selector .slds-docked-composer_overflow
  * @restrict .slds-docked-composer
  * @required
  */
.slds-docked-composer_overflow,
.slds-docked-composer--overflow {
  width: auto;
}

/**
  * Composer overflow button
  *
  * @selector .slds-docked-composer_overflow__button
  * @restrict .slds-docked-composer
  */
.slds-docked-composer_overflow__button,
.slds-docked-composer--overflow__button {
  display: flex;
  background: var(--slds-g-color-neutral-base-100, #{$color-background-docked-panel-header});
  padding: 0 $spacing-small;
  height: inherit;
  white-space: nowrap;
  border: {
    bottom: {
      left-radius: 0;
      right-radius: 0;
    }
  }
}

/**
  * Composer modal
  *
  * @selector .slds-docked-composer-modal
  * @restrict .slds-docked-composer
  */
.slds-docked-composer-modal {

  .slds-modal__content {
    border-radius: $border-radius-medium;
  }

  .slds-docked-composer {
    width: 100%;
    height: 100%;
    border: 0;
  }
}