@import "ui-variables";
@import "ui-mixins";

@-webkit-keyframes highlight {
  from { background-color: rgba(100, 255, 100, 0.7); }
  to { background-color: null; }
}

.editor {
  font-family: @font-family-code;

  &.mini {
    color: @text-color-highlight;
    background-color: @input-background-color;
    border-radius: @component-border-radius;
    padding-left: @component-padding/2;
    .placeholder-text {
      color: @text-color-subtle;
    }
    .cursor { border-color: #fff; }
    .selection .region { background-color: lighten(@input-background-color, 10%); }
  }

  &.editor-colors.mini.is-focused {
    .selection .region { background-color: lighten(@app-background-color, 5%); }
    transition: background-color 0.1s
  }

  .highlighted.selection .region {
    -webkit-animation-name: highlight;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
  }

}
