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

@code-bg-color: #fcf4db;

.template-picker {
  .menu {
    .content-container {
      height:150px;
      overflow-y:scroll;
    }
    .footer-container {
      border-top: 1px solid @border-secondary-bg;
    }
  }
}

.template-status-bar {
  background-color: @code-bg-color;
  color: darken(@code-bg-color, 70%);
  border: 1.5px solid darken(@code-bg-color, 10%);
  border-radius: @border-radius-small;
  padding-top: @padding-small-vertical @padding-small-horizontal @padding-small-vertical @padding-small-horizontal;
  font-size: @font-size-small;
}

.compose-body #contenteditable {
  code.var {
    font: inherit;
    padding:0;
    padding-left:2px;
    padding-right:2px;
    border-bottom: 1.5px solid darken(@code-bg-color, 10%);
    background-color: fade(@code-bg-color, 10%);
    &.empty {
      color:darken(@code-bg-color, 70%);
      border-bottom: 1px solid darken(@code-bg-color, 14%);
      background-color: @code-bg-color;
    }
  }
}