.pre-component
  width 100%
  box-shadow 0 0 0 1px transparent
  position relative
  transition-timing-function ease-in-out
  transition-duration .3s
  transition-property box-shadow

  &:hover
    .rt-code-viewer &
      box-shadow 0 0 0 1px rgba(b2c-purple-low, .2)

  &__trigger
    border-radius 0
    opacity .3
    position absolute
    top -30px
    left 15px
    z-index 10
    cursor pointer
    transition-timing-function ease-in-out
    transition-duration .3s
    transition-property opacity, color, background-color

    &-icon
      display none
      width 30px
      height 40px
      fill b2c-purple-high

      .rt-code-viewer &
        display block

    &:hover
      opacity 1

.code-editor
  height 30vh
  min-height 400px
  position fixed
  bottom 0
  left 20px
  right 20px
  z-index 100

  &__icon
    width 15px
    height 15px
    transition-timing-function ease-in-out
    transition-duration .3s
    transition-property fill
    fill #fff

    .{newAppName}-dark-theme &
      fill b2c-purple

  &__close
    width 30px
    height 30px
    box-sizing border-box
    background-color b2c-purple
    border-radius 50%
    padding 7.5px
    position absolute
    top -40px
    right -10px
    cursor pointer
    transition-timing-function ease-in-out
    transition-duration .3s
    transition-property background-color

    .{newAppName}-dark-theme &
      background-color #fff

  &__container
    width 100%
    height 100%

.monaco-editor .view-line
  padding-left 5px

/* fix cursor location */
.monaco-editor .cursor
  margin-left 5px

/* fix highlighted text selection */
.monaco-editor .selectionHighlight
  margin-left 5px

/* fix highlighted brackets */
.monaco-editor .bracket-match
  margin-left 15px

.monaco-editor .view-lines
  margin-left 5px

/* fix multiline text selection */
.monaco-editor .cslr.selected-text
  margin-left 5px

/* fix multiline text selection */
.monaco-editor .bottom-left-radius,
.monaco-editor .top-left-radius
  margin-left 5px