$multifile-active-tab-background-color: #FFF;
$multifile-inactive-tab-background-color: #F7F7F7;
$multifile-active-tab-border-color: #CCCCCC;
$multifile-inactive-tab-border-color: #ECF0F1;

#console {
  position: relative;
}

.editor-code {
  position: relative;
  min-height: 300px;
  max-height: none;
}

.submission-reset {
  padding: 5px;
  cursor: pointer;
}

.editor-resize {
  position: absolute;
  padding: 5px;
  cursor: pointer;
  z-index: 10;
  top: 0;
  right: 0;
  font-size: 0.5em;
  &.multiple-files {
    top: 43px;
  }
}


body:not(.fullscreen) {
  .CodeMirror-wrap,
  .CodeMirror-scroll {
    height: auto;
    min-height: 300px;
  }
}

body.fullscreen {
  overflow: hidden;
  form.new_solution {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 120;
    padding: 0;
    margin: 0;
    height: 100vh;
    background: white;
    .editor-code {
      margin: 0;
    }
    .btn-submit {
      display: none;
    }
    .CodeMirror-wrap {
      margin: 0;
      height: 100vh;
      width: 100vw;
    }
    .CodeMirror-scroll {
      height: inherit;
      overflow-y: scroll;
      overflow-x: auto;
    }
    .submission-reset,
    .editor-resize {
      margin-right: 15px;
    }
  }
}

.editor-files {
  position: relative;
}

.files-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: -6px;
  margin-left: 30px;

  .nav-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    z-index: 1;

    li {
      position: relative;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 0;
        padding: 5px 10px;
      }
      .delete-file-button {
        position: absolute;
        right: 16px;
        top: 12px;
        cursor: pointer;
      }
      &.active {
        a {
          background-color: $multifile-active-tab-background-color;
          border: 1px solid $multifile-active-tab-border-color;
          border-bottom: none;
        }
      }
      &:not(.active) > a {
        background-color: $multifile-inactive-tab-background-color;
        border: 1px solid $multifile-inactive-tab-border-color;
        border-bottom: 1px solid $multifile-active-tab-border-color;
        cursor: pointer;
        &:hover {
          background-color: $multifile-inactive-tab-border-color;
        }
      }
    }
  }

  .add-file-button {
    margin-left: 16px;
    margin-right: 16px;
    cursor: pointer;
  }
}