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

.editor.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, .editor .gutter {
  background-color: @app-background-color;
}

.editor.editor-colors.mini.is-focused {
  background-color: darken(@editor-background-color, 3%);
  .selection .region { background-color: desaturate(@background-color-info, 50%); }
  transition: background-color 0.1s
}

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

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