.composer-header {
  height: var(--wds-composer-header-height-medium, var(--wds-space-750));
  background-color: var(
    --wds-composer-header-fill,
    var(--wds-color-fill-surface-sunken)
  );
  box-shadow: inset 0 -1px 0 0
    var(--wds-composer-header-border-fill, var(--wds-color-white-transparent-0));

  &--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-750));
    padding-top: var(
      --wds-composer-header-padding-vertical-small,
      var(--wds-space-250)
    );
    padding-bottom: var(
      --wds-composer-header-padding-vertical-small,
      var(--wds-space-250)
    );
  }

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

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

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

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

  &__divider {
    margin-left: var(--wds-composer-header-divider-margin, var(--wds-space-400));
    margin-right: var(--wds-composer-header-divider-margin, var(--wds-space-400));
  }

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