@import 'colors';

.editor {
  height: 100%;

  .editor-box {
    height: calc(~'100% - 80px');
  }

  .tabs {
    margin: 8px;
    margin-bottom: 8px;
  }

  .title {
    background-color: @base;
    color: #f0f0f0;
    display: flex;
    padding: 4px 8px;


    b {
      background-color: desaturate(lighten(@base, 79%), 40%);
      border: 1px solid darken(@base, 20%);
      border-bottom-left-radius: 4px;
      border-right: 0px;
      border-top-left-radius: 4px;
      color: @base;
      display: block;
      font-size: 120%;
      height: 100%;
      margin-bottom: 8px;
      margin-top: 8px;
      padding: 8px;
    }

    input {
      border: 1px solid darken(@base, 20%);
      border-bottom-right-radius: 4px;
      border-top-right-radius: 4px;
      flex-grow: 1;
      font-size: 110%;
      margin: 8px;
      margin-left: 0px;
      padding: 8px;
    }
  }

  .variable-box {
    label:before {
      content: '$';
    }
  }
}

@import 'colors';

.editor {
  height: 100%;

  .editor-box {
    height: calc(~'100% - 80px');
  }

  .tabs {
    margin: 8px;
    margin-bottom: 8px;
  }

  .title {
    background-color: @base;
    color: #f0f0f0;
    display: flex;
    padding: 4px 8px;


    b {
      background-color: desaturate(lighten(@base, 79%), 40%);
      border: 1px solid darken(@base, 20%);
      border-bottom-left-radius: 4px;
      border-right: 0px;
      border-top-left-radius: 4px;
      color: @base;
      display: block;
      font-size: 120%;
      height: 100%;
      margin-bottom: 8px;
      margin-top: 8px;
      padding: 8px;
    }

    input,
    select {
      border: 1px solid darken(@base, 20%);
      border-bottom-right-radius: 4px;
      border-top-right-radius: 4px;
      font-size: 110%;
      margin: 8px;
      margin-left: 0px;
      padding: 8px;
    }

    input {
      flex-grow: 3;
    }

    select {
      flex-grow: 1;
    }
  }

  .variable-box {
    label:before {
      content: '$';
    }
  }
}

Add Style for hotkey selection
Add Style for hotkey selection
