/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
 * Intializes docked composer container window
 */
.slds-docked_container {
  display: flex;
  align-items: flex-end;
  position: fixed;
  inset-block-end: 0;
  inset-inline-end: 0;
  padding: 0 var(--slds-g-spacing-7);
  height: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-3));
  font-weight: var(--slds-s-container-heading-font-weight);
}

.slds-docked-composer {
  position: relative;
  border-radius: var(--slds-s-container-radius-border, var(--slds-g-radius-border-2))
    var(--slds-s-container-radius-border, var(--slds-g-radius-border-2)) 0 0;
  width: 480px;
  height: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-3));
  float: inline-start;
  box-shadow: var(--slds-g-shadow-block-start-3);
  border: var(--slds-s-container-sizing-border, var(--slds-g-sizing-border-1)) solid
    var(--slds-s-container-color-border, var(--slds-g-color-border-1));
  border-bottom: none;
  font-weight: var(--slds-s-container-heading-font-weight);
  background-color: var(--slds-g-color-surface-container-1);

  &.slds-has-focus {
    box-shadow: var(--slds-g-shadow-outset-focus-1);
  }

  &.slds-is-open {
    height: 480px;
  }

  &.slds-is-closed {
    height: calc(var(--slds-g-sizing-9) + var(--slds-g-sizing-3));

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

  + .slds-docked-composer {
    margin-inline-start: var(--slds-g-spacing-7);
  }
}

/**
  * Bar at the top of the composer that contains actionable items to invoke,
  * such as minimizing, popping out the composer and removing the composer.
  */
.slds-docked-composer__header {
  background: var(--slds-g-color-surface-container-1);
  border-bottom: var(--slds-g-sizing-border-2) solid var(--slds-g-color-accent-container-1);
  border-radius: var(--slds-s-container-radius-border) var(--slds-s-container-radius-border) 0 0;
  padding: var(--slds-g-spacing-2) var(--slds-g-spacing-3);
  font-size: var(--slds-s-container-heading-font-size, var(--slds-g-font-size-base));
  color: var(--slds-g-color-on-surface-3);
}

.slds-docked-composer__actions .slds-button {
  margin-inline-start: var(--slds-g-spacing-3);
}

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

.slds-docked-composer__body_form {
  justify-content: flex-start;
  padding: var(--slds-g-spacing-4);
}

/**
  * Within the docked composer body, the lead is the first region
  */
.slds-docked-composer__lead {
  display: flex;
  background: var(--slds-g-color-surface-container-1);
  padding: var(--slds-g-spacing-4) var(--slds-g-spacing-2);
}

/**
  * Toolbar within the docked composer body
  */
.slds-docked-composer__toolbar {
  background: var(--slds-g-color-surface-container-2);
  padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2);
  max-height: 60px;
  overflow-y: auto;
  border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
}

/**
  * Text input within the docked composer body
  */
.slds-docked-composer__input {
  background: var(--slds-g-color-surface-container-1);
  padding: var(--slds-g-spacing-4);
  min-height: calc(var(--slds-g-sizing-10) + var(--slds-g-sizing-9));
  resize: none;
  line-height: var(--slds-g-font-lineheight-base);
  overflow: hidden;
  overflow-y: auto;
  font-family: inherit;
}

/**
  * Bar at the bottom of the composer that contains actionable items to
  * invoke, such as saving, associating relationships and adding content.
  */
.slds-docked-composer__footer {
  display: flex;
  background: var(--slds-s-container-footer-color-background, var(--slds-g-color-surface-container-2));
  padding: var(--slds-g-spacing-3) var(--slds-g-spacing-2);
  border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);

  .slds-button {
    justify-content: center;
  }
}

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

/**
  * Composer overflow button
  */
.slds-docked-composer_overflow__button {
  display: flex;
  background: var(--slds-g-color-surface-container-1);
  padding: 0 var(--slds-g-spacing-3);
  height: inherit;
  white-space: nowrap;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  &:focus-visible {
    outline: var(--slds-g-sizing-border-2) solid var(--slds-s-link-outline-color);
    outline-offset: -2px;
    box-shadow: none;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }
}

/**
  * Composer modal
  */
.slds-docked-composer-modal {
  .slds-modal__content {
    border-radius: var(--slds-s-container-radius-border, var(--slds-g-radius-border-2));
  }

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

/**
 * Initiazes email composer inside of a docked composer
 */
.slds-email-composer {
  position: relative;
  flex: 1 1 auto;

  .slds-rich-text-editor {
    border: 0;
    border-top: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
    border-radius: 0;
  }
}

/**
 * Modifier combobox when used inside of email composer
 */
.slds-email-composer__combobox {
  padding-inline-start: var(--slds-g-spacing-8);
  border: 0;
  border-bottom: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-radius: 0;

  .slds-form-element__label {
    position: absolute;
    inset-inline-start: var(--slds-g-spacing-3);
    inset-block-start: 50%;
    transform: translateY(-50%);
  }

  .slds-combobox_container,
  .slds-input[value] {
    border: 0;
    box-shadow: none;
  }
}

/**
 * Provides styles for recipient labels inside of email composer
 */
.slds-email-composer__recipient {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: var(--slds-g-spacing-3);
}