.variable-literal-editor{
  width: 100%;
  font-family:monospace;
  min-height:100px;
}

.variable-header{
  max-width: 300px;
}

.variable-static-description{
  display:flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;

  &-arrow{
    color:$gray1;
    font-size: 18px;
    margin: 5px;
  }
  &-stage{
    display:flex;
    flex-direction: row;
    align-items: center;
    &-outputtype{
      background-color:white;
      display:inline-block;
      font-weight:bold;
      border-radius:4px;
      color: $gray3;
      padding:3px;
    }
    &-name{
      border:1px solid $gray3;
      background-color:white;
      display:inline-block;
      font-weight:bold;
      border-radius:4px;
      color: $gray1;
      padding:3px;
      // TODO make this a mixin or whatever
      -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75) inset;
      -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75) inset;
      -moz-box-shadow-inset: 1px 1px 1px 0px rgba(0,0,0,0.75) inset;
      box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75) inset;
    }
    &-arrow{
      display: inline-block;
      font-size: 20px;
      color:black;
      margin: 5px;
    }
  }
}