.composer-header {
  padding-left: var(--wds-space-400, 24px);
  padding-right: var(--wds-space-400, 24px);
  height: var(--wds-composer-header-height-medium, var(--wds-space-600, 36px));
  padding-top: var(--wds-space-250, 15px);
  padding-bottom: var(--wds-space-250, 15px);
  box-sizing: content-box;
  background-color: var(
    --wds-composer-header-fill,
    var(--wds-color-fill-surface-default, var(--wsr-color-D80, #FFFFFF))
  );
  display: flex;
  align-items: center;
  box-shadow: inset 0 -1px 0 0
    var(
      --wds-composer-header-border-fill,
      var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB))
    );

  &--drop-shadow {
    box-shadow: var(
      --wds-shadow-200,
      var(
        --wsr-shadow20,
        0 2px 4px 0 rgba(22, 45, 61, 0.12),
        0 0 6px 0 rgba(22, 45, 61, 0.12)
      )
    );
  }

  &--size-small {
    height: var(--wds-composer-header-height-small, var(--wds-space-500, 30px));
    padding-top: var(
      --wds-composer-header-padding-vertical-small,
      var(--wds-space-200, 12px)
    );
    padding-bottom: var(
      --wds-composer-header-padding-vertical-small,
      var(--wds-space-200, 12px)
    );
  }

  &__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
  }

  &__actions {
    display: flex;
    align-items: center;
    width: 100%;
  }

  &__actions > :not(:last-child) {
    margin-right: var(
      --wds-composer-header-actions-gap,
      var(--wds-space-200, 12px)
    );
  }

  &__actions > &__save-status {
    margin-right: var(--wds-space-400, 24px);
  }

  &__main-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__main-actions > :not(:last-child) {
    margin-right: var(--wds-space-200, 12px);
  }

  &__back-button {
    white-space: nowrap;
  }

  & &__back-button#{&}__back-button .button-core__prefix {
    width: var(
      --wds-composer-header-back-button-icon-size-medium,
      var(--wds-space-400, 24px)
    );
    height: var(
      --wds-composer-header-back-button-icon-size-medium,
      var(--wds-space-400, 24px)
    );
  }

  &--size-small &__back-button#{&}__back-button .button-core__prefix {
    width: var(
      --wds-composer-header-back-button-icon-size-small,
      var(--wds-space-300, 18px)
    );
    height: var(
      --wds-composer-header-back-button-icon-size-small,
      var(--wds-space-300, 18px)
    );
  }

  &__divider {
    width: 1px;
    min-width: 1px;
    height: var(--wds-space-400, 24px);
    background-color: var(
      --wds-color-border-dark-secondary,
      var(--wsr-color-D60, #DFE5EB)
    );
    margin-left: var(--wds-composer-header-divider-margin, 20px);
    margin-right: var(--wds-composer-header-divider-margin, 20px);
  }

  &--mobile {
    height: 32px;
    padding: var(--wds-space-250, 15px) var(--wds-space-300, 18px);
  }

  &--mobile &__actions--hide-on-mobile {
    display: none;
  }

  &--mobile &__divider {
    height: 32px;
    margin-left: var(--wds-space-200, 12px);
    margin-right: var(--wds-space-200, 12px);
  }

  &--mobile &__back-button .button-core__content {
    border: 0;
    /* stylelint-disable-next-line plugin/use-baseline */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }

  &--mobile &__back-button#{&}__back-button .button-core__prefix {
    padding-right: 0;
  }
}