// The ui-variables and syntax-variables are set by the currently selected
// ui and syntax theme
// See https://github.com/atom/atom-dark-ui
// for an example of what variables are available.
@import "ui-variables";
// https://github.com/atom/template-syntax/blob/master/stylesheets/syntax-variables.less
@import "syntax-variables";

@bt-border-color: @base-border-color;
@vertical-padding: @component-line-height/4;
@sc-error: desaturate(#ff0000, 30%);

@f1: 3rem;
@f2: 2.25rem;
@f3: 1.5rem;
@f4: 1.25rem;
@f5: 1rem;
@f6: 0.875rem;

.post-window {
  overflow-y: scroll;
  box-sizing: border-box;
  background: @syntax-background-color;
  color: @syntax-text-color;
  font-size: @f5;
  line-height: 1.3;
  atom-text-editor.editor {
    // I'm claiming its an atom-text-editor
    // for styling purposes
    // but user select needs to be enabled again
    // for native select + copy to work
    -webkit-user-select: inherit;
    -user-select: inherit;
    &.scroll-view {
      min-height: 100%;
    }
  }
  .clearfix {
    zoom: 1;
    &:after,
    &:before {
      content: "";
      display: table;
    }
    &:after {
      clear: both;
    }
  }
  .lines {
    min-height: 100%;
    padding: @component-padding;
    width: 100%;
  }
  .pre {
    white-space: pre-wrap;
  }
  .stderr {
    color: @sc-error;
  }
  // font-size: @font-size;
  // font-family: @font-family;
  .state {
    font-weight: bold;
    font-variant: small-caps;
    font-size: @f3;
    letter-spacing: 0.08em;
    border-bottom: 1px solid fadeout(@background-color-info, 90%);
    // border-color: @panel-heading-border-color;
    // color: #fff;
    padding: 1px;
    margin: @vertical-padding auto;
    // width: 100%;
    &.config {
      color: fadeout(@background-color-info, 40%);
      // border-bottom: 1px solid fadeout(@background-color-info, 80%);
    }
    &.booting {
      color: fadeout(@background-color-info, 40%);
      // border-bottom: 1px solid fadeout(@background-color-info, 80%);
    }
    &.ready {
      color: @background-color-success;
      border-bottom: 1px solid fadeout(@background-color-success, 90%);
    }
    &.compileError {
      color: fadeout(@background-color-error, 40%);
      border-bottom: 1px solid fadeout(@background-color-error, 80%);
    }
    &.dead {
      color: fadeout(@background-color-error, 40%);
      border-bottom: 1px solid fadeout(@background-color-error, 80%);
    }
    &.compiled,
    &.compiling,
    &.null {
      display: none;
    }
  }
  .error,
  .in,
  .out {
    // padding-left: 1em;
    // border-left: 2px solid transparent;
  }
  .in {
    color: @text-color-info;
    // border-color: fadeout(@text-color-info, 80%);
  }
  .out {}
  .error {
    &.text {
      color: @sc-error;
      font-size: @f4;
    }
    // border-color: fadeout(@background-color-error, 60%);
    // padding-left: 1em;
    // margin: 1px 0;
    .title {
      strong {
        color: @sc-error;
        font-size: @f4;
        padding: @vertical-padding 0;
      }
      .time {
        float: right;
      }
    }
  }
  .error-label {
    color: @sc-error;
  }
  .warning-label {
    color: @text-color-warning;
  }
  .time {
    color: fadeout(@text-color-subtle, 30%);
    font-size: @f6;
  }
  .error-Error,
  .error-ParseError,
  .error-SyntaxError {
    margin-top: @vertical-padding;
    // border: 1px solid fadeout(@background-color-error, 80%);
  }
  .object-vars {
    opacity: 0.8;
    margin-left: 1rem;
    th {
      white-space: nowrap;
    }
  }
  .debug {
    clear: both;
    font-size: @f5;
  }
  .tr {
    display: table;
  }
  .td,
  .th {
    vertical-align: top;
    display: table-cell;
  }
  .th {
    width: 12em;
  }
  .config {
    a {
      text-decoration: underline;
      color: @syntax-color-import;
    }
    td,
    th {
      padding: 0.25rem;
    }
  }
  // backtrace
  .bt {
    margin: @vertical-padding 1rem @vertical-padding 0;
    font-size: @f5;
    // background: @bt-background;
    // box-shadow: inset 0px 0px 2px 0px fadeout(@bt-border-color, 80%);
    word-break: break-all;
    h5 {
      font-size: @f6;
      color: @syntax-text-color;
      letter-spacing: 0.08em;
      margin: 1rem 0 0.25rem;
      // font-style: italic;
      font-variant: small-caps;
    }
    .source {
      // background: lighten(@bt-background, 10%);
      // border: 1px solid fadeout(@inset-panel-border-color, 80%);
      box-shadow: inset 0 0 2px 0 fadeout(@bt-border-color, 80%);
      padding: @vertical-padding 1em;
      margin: @vertical-padding .5em;
      display: inline-block;
      min-width: 50%;
      font-size: @f5;
      word-break: normal;
      white-space: pre-wrap;
      overflow: auto;
    }
  }
  .bt-line {
    padding: @vertical-padding 0.5em;
    border-bottom: 1px solid fadeout(@syntax-text-color, 90%);
    &:hover {
      background: fadeout(desaturate(@ui-site-color-2, 80%), 98%);
      box-shadow: 0 0 2px 2px fadeout(@bt-border-color, 90%);
      a {
        border-bottom: 1px solid @syntax-text-color;
      }
      .bt-link,
      .frame-address {
        color: @syntax-text-color;
      }
    }
    a {
      color: @syntax-text-color;
    }
    .tr,
    h5 {
      margin-left: 0.25rem;
    }
  }
  .bt-name {
    font-weight: bold;
    font-size: @f4;
    color: @syntax-text-color;
  }
  .bt-link {
    display: none;
    font-size: @f6;
    color: transparent;
  }
  .bt-line:last-child {
    border-bottom: 0;
  }
  .frame-address {
    font-size: @f6;
    color: transparent;
    display: none;
  }
}

atom-text-editor.editor .line,
atom-text-editor.editor .line.cursor-line,
atom-text-editor.editor.is-focused.insert-mode .line.cursor-line
 {
  transition: background-color, color 1.2s ease-out;
  -webkit-transition: background-color, color 1.2s ease-out;
  // &.line-green {
  //   background-color: @green-color;
  // }
  //
  // &.line-blue {
  //   background-color: @blue-color;
  // }
  &.line-error {
    background-color: fadeout(@background-color-error, 95%);
    border: 1px solid fadeout(@background-color-error, 50%);
  }
  &.line-highlight {
    background-color: @background-color-highlight;
  }
  &.eval-flash {
    color: @syntax-selection-flash-color;
    background-color: @syntax-background-color;
  }
  &.eval-success {
    color: @text-color-success;
    background-color: fadeout(@background-color-success, 50%);
  }
  &.eval-error,
  &.eval-syntax-error {
    color: @text-color-error;
    background-color: @background-color-error;
  }
}
// unfolding in the stack trace
.unfolder {
  display: none;
}
.toggle-label {
  display: inline-block;
  cursor: pointer;
  font-size: @f5;
  // border-radius: 5px;
  // padding: 5px;
}
.class-method {
  margin: 0 0.25em;
}
.fold-icon,
.unfold-icon {
  color: fadeout(@text-color-subtle, 50%);
  font-size: @f6;
  display: inline-block;
  &:hover {
    color: @text-color-subtle;
  }
}
.unfolder ~ .fold {
  display: none;
}
.unfolder ~ label .fold-icon {
  display: none;
}
.unfolder:checked ~ .fold {
  display: block;
}
.unfolder:checked ~ label .fold-icon {
  display: inline-block;
}
.unfolder:checked ~ label .unfold-icon {
  display: none;
}
// a hack for the syntax colors
// because most syntax themes do not
// specify a color for symbol
span.entity.name.symbol {
  color: @syntax-color-tag;
}
