@import "theme";

#bladeburner-container {
  a,
  div,
  p,
  pre,
  td {
    font-size: $defaultFontSize * 0.8125;
  }
}

.bladeburner-action {
  border: 1px solid #fff;
  margin: 7px;
  padding: 7px;
  white-space: pre-wrap;

  pre {
    white-space: pre-wrap;
  }
}

/* Whatever action is currently active */
.bladeburner-active-action {
  border: 4px solid #fff;
}

/* Action & Skills panel navigation button */
%bladeburner-nav-button {
  border: 1px solid #fff;
  margin: 2px;
  padding: 2px;
  color: #fff;
}

.bladeburner-nav-button {
  @extend %bladeburner-nav-button;

  &:hover {
    background-color: #3d4044;
  }
}

.bladeburner-nav-button-inactive {
  @extend %bladeburner-nav-button;

  text-decoration: none;
  background-color: #555;
  cursor: default;
  pointer-events: none;
}

/* Checkbox for (de)selecting autoleveling */
.bbcheckbox {
  position: relative;
  display: inline;
  label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    border-width: 1px;
    border-color: white;
    border-style: solid;
    &:after {
      content: "";
      width: 9px;
      height: 5px;
      position: absolute;
      top: 5px;
      left: 5px;
      border: 3px solid white;
      border-top: none;
      border-right: none;
      opacity: 0;
      transform: rotate(-45deg);
    }
  }
  input[type="checkbox"] {
    margin: 3px;
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }
  }
}

/* Bladeburner Console */
.bladeburner-console-div {
  display: inline-block;
  width: 40%;
  border: 1px solid #fff;
  overflow: auto;
  height: 100%;
  position: absolute;
}

.bladeburner-console-table {
  height: auto;
  overflow: auto;
  table-layout: fixed;
  width: 100%;
}

.bladeburner-console-input-row {
  transition: height 1s;
  width: 100%;
}

.bladeburner-console-input-cell {
  display: flex;
}

.bladeburner-console-input {
  display: inline-block;
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
  background-color: var(--my-background-color);
  font-size: $defaultFontSize * 0.8125;
  outline: none;
  color: var(--my-font-color);
  flex: 1 1 auto;
}

.bladeburner-console-line {
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
}