.sidebar-tab {
  font-family: $font-stack-base;

  #combat-round {
    h3 {
      font-family: $font-stack-secondary;
    }
  }

  .combat-tracker-header {
    border: none;
  }

  .directory-item--group,
  .combat-control[data-control="endCombat"],
  .combat-control[data-control="startCombat"] {
    font-family: $font-stack-secondary;
  }

  .directory-item--group {
    background: $c-navy-up;
    padding: 4px 10px;
    justify-content: center;

    &.npc {
      background: $c-blood;
    }
  }

  .directory-list {
    .directory-item {
      .ct-item--img {

        img {
          width: 100%;
          height: auto;
          margin: auto;
        }
      }
    }
  }

  .directory-list--pbta {
    padding: 0;
    margin: 0;

    .directory-item {
      border-bottom: 1px solid rgba($c-black, 0.25);
      line-height: 1;
      transition: all ease-in-out 0.25s;
      position: relative;
      padding-left: 5px;
      padding-right: 5px;

      &::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: 5px;
        width: 0px;
        background: rgba($c-white, 0.75);
        transition: all ease-in-out 0.25s;
        pointer-events: none;
      }

      &.hidden {
        opacity: 0.5;
      }

      &.grid-3col {
        grid-template-columns: 14% 42% 18%;
        gap: 2%;
      }

      &.grid-4col {
        grid-template-columns: 14% 42% 18% 18%;
        gap: 2%;
      }

      &.grid-6col {
        // grid-template-columns: 32px 76px 22px 45px 70px 41px;
        grid-template-columns: 11% 32% 14% 12% 17% 14%;
        gap: 0%;
      }

      &.grid-5col {
        // grid-template-columns: 32px 90px 22px 45px 100px;
        grid-template-columns: 11% 33% 14% 12% 30%;
        gap: 0%;
      }
    }

    .drop-hover {
      &::after {
        width: 100%;
      }
    }
  }

  .ct-label {
    text-align: center;
  }

  .ct-label--moves {
    flex: 0 0 14%;
  }

  .ct-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    > span,
    > button {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &.ct-item--name {
      align-self: center;
      align-items: baseline;

      > span {
        font-size: var(--font-size-16);
      }

      .combatant-controls {
        flex: 0 0 20px;
        font-size: var(--font-size-14);
        line-height: 20px;
        width: 100%;
      }

      .combatant-control {
        flex: 0 0 20px;
        height: 20px;
        float: left;
        color: var(--color-text-dark-5);

        &.active {
          color: var(--color-text-light-1);
        }
      }

      .token-effects {
        height: 20px;
        overflow: hidden;
      }

      img.token-effect {
        width: 16px;
        height: 16px;
        margin: 1px 0;
        border: none;
        border-radius: 0;
      }
    }

    button {
      background: $c-navy-up;
      color: $c-white;
      font-family: $font-stack-base;
      border: 0;

      &:hover {
        text-shadow: none;
        box-shadow: none;
        background: $c-navy-hover;
      }
    }

    input[type="text"] {
      width: auto;
      height: auto;
      line-height: 1;
      min-width: 0;
      color: $c-white;
      text-align: center;
      border: 1px solid rgba($c-white, 0.25);
    }
  }

  .npc {
    .ct-item {
      button {
        background: $c-blood;

        &:hover {
          background: $c-blood-hover;
        }
      }
    }
  }

  .ct-item--name {
    flex: 1;
    padding: 0 4px;

    &, & > * {
      justify-content: flex-start;
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .ct-item--hp,
  .ct-item--armor {
    flex: 0 0 32px;
  }

  .ct-item--img {

    .image-wrapper {
      position: relative;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }

    .progress-ring {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: inset 0 0 3px 5px rgba(0,0,0,0.65);
      border-radius: 50%;
    }

    .progress-ring--100,
    .progress-ring--90 {
      circle {
        stroke: $c-green;
      }
    }

    .progress-ring--80,
    .progress-ring--70 {
      circle {
        stroke: $c-yellow;
      }
    }

    .progress-ring--60,
    .progress-ring--50,
    .progress-ring--40 {
      circle {
        stroke: $c-orange;
      }
    }

    .progress-ring--30,
    .progress-ring--20,
    .progress-ring--10,
    .progress-ring--0 {
      circle {
        stroke: $c-red;
      }
    }
  }

  .actor-elem {
    height: 54px;
    margin: 0;

    .ct-item--resource,
    .ct-item--moves {
      font-family: $font-stack-secondary;
      font-size: 14px;
    }
  }

  .directory-item--labels {
    font-size: var(--font-size-12);
    background: rgba($c-navy-up, 0.25);
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
    padding: 4px 0;

    &.npc {
      background: rgba($c-blood, 0.25);
    }
  }

}

// Hide unused controls.
.combat-control[data-control="resetAll"],
.combat-control[data-control="rollNPC"],
.combat-control[data-control="rollAll"],
.combat-control[data-control="previousTurn"],
.combat-control[data-control="nextTurn"] {
  display: none;
}

// Resize the popout.
#combat-popout {
  width: 600px !important;
  height: auto !important;

  .ct-item--img {
    .image-wrapper {
      width: 62px;
      height: 62px;
    }

    .progress-ring {
      box-shadow: inset 0 0 5px 9px rgba(0,0,0,0.65);
    }
  }
}

#combat {
  #combat-tracker {
    background: rgba($c-black, 0.25);
  }
}