@import "../../styles/var.less";

#__vconsole {
  --VC-BG-0: #ededed;
  --VC-BG-1: #f7f7f7;
  --VC-BG-2: #fff;
  --VC-BG-3: #f7f7f7;
  --VC-BG-4: #4c4c4c;
  --VC-BG-5: #fff;
  --VC-BG-6: rgba(0, 0, 0, 0.1);
  --VC-FG-0: rgba(0, 0, 0, 0.9);
  --VC-FG-HALF: rgba(0, 0, 0, 0.9);
  --VC-FG-1: rgba(0, 0, 0, 0.5);
  --VC-FG-2: rgba(0, 0, 0, 0.3);
  --VC-FG-3: rgba(0, 0, 0, 0.1);
  --VC-RED: #fa5151;
  --VC-ORANGE: #fa9d3b;
  --VC-YELLOW: #ffc300;
  --VC-GREEN: #91d300;
  --VC-LIGHTGREEN: #95ec69;
  --VC-BRAND: #07c160;
  --VC-BLUE: #10aeff;
  --VC-INDIGO: #1485ee;
  --VC-PURPLE: #6467f0;
  --VC-LINK: #576b95;
  --VC-TEXTGREEN: #06ae56;
  --VC-FG: black;
  --VC-BG: white;
  --VC-BG-COLOR-ACTIVE: #ececec;
  --VC-WARN-BG: overlay(rgba(255, 255, 255, .8), #ffc300);
  --VC-WARN-BORDER: overlay(rgba(255, 255, 255, .6), #ffc300);;
  --VC-ERROR-BG: overlay(rgba(255, 255, 255, .8), #fa5151);
  --VC-ERROR-BORDER: overlay(rgba(255, 255, 255, .6), #fa5151);

  --VC-DOM-TAG-NAME-COLOR: #881280;
  --VC-DOM-ATTRIBUTE-NAME-COLOR: #994500;
  --VC-DOM-ATTRIBUTE-VALUE-COLOR: #1a1aa6;

  --VC-CODE-KEY-FG: #881391;
  --VC-CODE-PRIVATE-KEY-FG: overlay(rgba(255, 255, 255, .6), #881391);
  --VC-CODE-FUNC-FG: #0d22aa;
  --VC-CODE-NUMBER-FG: #1c00cf;
  --VC-CODE-STR-FG: #c41a16;
  --VC-CODE-NULL-FG: #808080;



  color: var(--VC-FG-0);
  font-size: @fontSize;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  -webkit-user-select: auto;


  /* global */

  .vc-max-height {
    max-height: (250em / @font);
  }
  .vc-max-height-line {
    max-height: (82em / @font);
  }
  .vc-min-height {
    min-height: (40em / @font);
  }

  dd, dl, pre {
    margin: 0;
  }
  pre {
    white-space: pre-wrap;
  }

  i {
    font-style: normal;
  }

}

// table
.vc-table {
  height: 100%;

  .vc-table-row {
    line-height: 1.5;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow: hidden;
    border-bottom: 1px solid var(--VC-FG-3);
  }
  .vc-table-row.vc-left-border {
    border-left: 1px solid var(--VC-FG-3);
  }
  .vc-table-row-icon {
    margin-left: 4px;
  }

  .vc-table-col {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: (3em / @font) (4em / @font);
    border-left: 1px solid var(--VC-FG-3);
    overflow: auto;
  }
  .vc-table-col:first-child {
    border: none;
  }

  .vc-table-col-value {
    white-space: pre-wrap;
    word-break: break-word;
    /*white-space: nowrap;
    text-overflow: ellipsis;*/
    -webkit-overflow-scrolling: touch;
  }

  .vc-small .vc-table-col {
    padding: 0 (4em / @font);
    font-size: (12em / @font);
  }

  .vc-table-col-2 {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -moz-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
  }
  .vc-table-col-3 {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    -moz-box-flex: 3;
    -ms-flex: 3;
    flex: 3;
  }
  .vc-table-col-4 {
    -webkit-box-flex: 4;
    -webkit-flex: 4;
    -moz-box-flex: 4;
    -ms-flex: 4;
    flex: 4;
  }
  .vc-table-col-5 {
    -webkit-box-flex: 5;
    -webkit-flex: 5;
    -moz-box-flex: 5;
    -ms-flex: 5;
    flex: 5;
  }
  .vc-table-col-6 {
    -webkit-box-flex: 6;
    -webkit-flex: 6;
    -moz-box-flex: 6;
    -ms-flex: 6;
    flex: 6;
  }

  .vc-table-row-error {
    border-color: var(--VC-ERROR-BORDER);
    background-color: var(--VC-ERROR-BG);

    .vc-table-col {
      color: var(--VC-RED);
      border-color: var(--VC-ERROR-BORDER);
    }
  }

  .vc-table-col-title {
    font-weight: bold;
  }

  .vc-table-action {
    display: flex;
    justify-content: space-evenly;

    .vc-icon {
      flex: 1;
      text-align: center;
      display: block;
      &:hover {
        background: var(--VC-BG-3);
      }
      &:active {
        background: var(--VC-BG-1);
      }
    }
  }

  .vc-table-input {
    width: 100%;
    border: none;
    color: var(--VC-FG-0);
    background-color: var(--VC-BG-6);
    height: (46em / @font);
  }
  .vc-table-input:focus {
    background-color: var(--VC-FG-2);
  }
}


@media (prefers-color-scheme: dark) {
  #__vconsole:not([data-theme="light"]) {
      --VC-BG-0: #191919;
      --VC-BG-1: #1f1f1f;
      --VC-BG-2: #232323;
      --VC-BG-3: #2f2f2f;
      --VC-BG-4: #606060;
      --VC-BG-5: #2c2c2c;
      --VC-BG-6: rgba(255, 255, 255, 0.2);
      --VC-FG-0: rgba(255, 255, 255, 0.8);
      --VC-FG-HALF: rgba(255, 255, 255, 0.6);
      --VC-FG-1: rgba(255, 255, 255, 0.5);
      --VC-FG-2: rgba(255, 255, 255, 0.3);
      --VC-FG-3: rgba(255, 255, 255, 0.05);
      --VC-RED: #fa5151;
      --VC-ORANGE: #c87d2f;
      --VC-YELLOW: #cc9c00;
      --VC-GREEN: #74a800;
      --VC-LIGHTGREEN: #28b561;
      --VC-BRAND: #07c160;
      --VC-BLUE: #10aeff;
      --VC-INDIGO: #1196ff;
      --VC-PURPLE: #8183ff;
      --VC-LINK: #7d90a9;
      --VC-TEXTGREEN: #259c5c;
      --VC-FG: white;
      --VC-BG: black;
      --VC-BG-COLOR-ACTIVE: #282828;
      --VC-WARN-BG: overlay(rgba(0, 0, 0, .8), #ffc300);
      --VC-WARN-BORDER: overlay(rgba(0, 0, 0, .6), #ffc300);
      --VC-ERROR-BG: overlay(rgba(0, 0, 0, .8), #fa5151);
      --VC-ERROR-BORDER: overlay(rgba(0, 0, 0, .6), #fa5151);

      --VC-DOM-TAG-NAME-COLOR: #5DB0D7;
      --VC-DOM-ATTRIBUTE-NAME-COLOR: #9BBBDC;
      --VC-DOM-ATTRIBUTE-VALUE-COLOR: #f29766;

      --VC-CODE-KEY-FG: #e36eec;
      --VC-CODE-PRIVATE-KEY-FG: overlay(rgba(255, 255, 255, .6), #e36eec);
      --VC-CODE-FUNC-FG: #556af2;
      --VC-CODE-NUMBER-FG: #9980ff;
      --VC-CODE-STR-FG: #e93f3b;
      --VC-CODE-NULL-FG: #808080;
  }
}

#__vconsole[data-theme="dark"] {
  --VC-BG-0: #191919;
  --VC-BG-1: #1f1f1f;
  --VC-BG-2: #232323;
  --VC-BG-3: #2f2f2f;
  --VC-BG-4: #606060;
  --VC-BG-5: #2c2c2c;
  --VC-BG-6: rgba(255, 255, 255, 0.2);
  --VC-FG-0: rgba(255, 255, 255, 0.8);
  --VC-FG-HALF: rgba(255, 255, 255, 0.6);
  --VC-FG-1: rgba(255, 255, 255, 0.5);
  --VC-FG-2: rgba(255, 255, 255, 0.3);
  --VC-FG-3: rgba(255, 255, 255, 0.05);
  --VC-RED: #fa5151;
  --VC-ORANGE: #c87d2f;
  --VC-YELLOW: #cc9c00;
  --VC-GREEN: #74a800;
  --VC-LIGHTGREEN: #28b561;
  --VC-BRAND: #07c160;
  --VC-BLUE: #10aeff;
  --VC-INDIGO: #1196ff;
  --VC-PURPLE: #8183ff;
  --VC-LINK: #7d90a9;
  --VC-TEXTGREEN: #259c5c;
  --VC-FG: white;
  --VC-BG: black;
  --VC-BG-COLOR-ACTIVE: #282828;
  --VC-WARN-BG: overlay(rgba(0, 0, 0, .8), #ffc300);
  --VC-WARN-BORDER: overlay(rgba(0, 0, 0, .6), #ffc300);
  --VC-ERROR-BG: overlay(rgba(0, 0, 0, .8), #fa5151);
  --VC-ERROR-BORDER: overlay(rgba(0, 0, 0, .6), #fa5151);

  --VC-DOM-TAG-NAME-COLOR: #5DB0D7;
  --VC-DOM-ATTRIBUTE-NAME-COLOR: #9BBBDC;
  --VC-DOM-ATTRIBUTE-VALUE-COLOR: #f29766;

  --VC-CODE-KEY-FG: #e36eec;
  --VC-CODE-PRIVATE-KEY-FG: overlay(rgba(255, 255, 255, .6), #e36eec);
  --VC-CODE-FUNC-FG: #556af2;
  --VC-CODE-NUMBER-FG: #9980ff;
  --VC-CODE-STR-FG: #e93f3b;
  --VC-CODE-NULL-FG: #808080;
}
