@import '../variables';
@import '../mixins';

.full-editor{
  width: 100%;
  height: 100%;
  display: flex;
  gap: 1%;
  @include down(1000){
    flex-direction: column;
    gap: 5%;
    & > div {
      width: 100%;
      height: 1000px;
    }
    overflow: scroll;
    @include no-scroll();
  }
}


.editor{
  width: 50%;
  height: 100%;
}


.console-container{
  width: 50%;
}

/* .onglet-container{
  height: 5%;
} */

.onglet{
  background-color: #312e79;
  width: max-content;
  height: 100%;
  padding: 1%;
  border-radius: 5px 5px 0 0;
}


.console{
    background-color: $background-dark;
    height: 95%;
    padding: 1%;
    transition: .8s;
}

.run-icon{
  color: $dark-green;
  height: 100%;
  width: 40%;
  transition: .3s;
}

.btn{
  padding: 0 2%;
}

.run-btn{
  display: flex;
  align-items: center;
  font-size: 1.05em;
  background-color:lighten($color: $dark-green, $amount: 15);
  color: $dark-green;
  &:hover{
    background-color: $dark-green;
    color: white;
    & .run-icon{
      color: white;
    }
  }
  padding: 0 2%;
}

.btn-container{
  display: flex;
  justify-content: center;
}

.loader{
  border-color: $dark-green;
  border-bottom-color: transparent;
}

.error_lines{color:$red;}

.warn{
  transition: .3s;
  border: 1px solid $red;
}