.euiMarkdownEditorTextArea {
  @include euiFormControlText;
  @include euiScrollBar;
  width: 100%;
  height: 100%;
  min-height: $euiMarkdownEditorMinHeight;
  padding: $euiSizeM;
  border: $euiBorderThin;
  border-bottom: none;
  // Overrides the euiFormControlText line-height that is very small
  line-height: $euiLineHeight;
  resize: vertical;
  background-color: $euiFormBackgroundColor;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  // Removes default firefox margin
  margin: 0;

  // sass-lint:disable-block indentation
  transition:
    box-shadow $euiAnimSpeedFast ease-in,
    background-image $euiAnimSpeedFast ease-in,
    background-size $euiAnimSpeedFast ease-in,
    background-color $euiAnimSpeedFast ease-in;

  &:focus,
  // preventing the text area of loosing focus when clicking on an action button
  // from the toolbar
  .euiMarkdownEditor:focus-within &  {
    background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
    background-image: euiFormControlGradient();
    background-size: 100% 100%;
  }
}