$coin_size: 15px;
$coin_margin: 3px;

@import 'coins.scss';

.item {

  justify-content: space-between;

  .item-body {

    margin-bottom: 10px;
    * {
      margin-right: 10px;
    }

    .item-description {
      font-style: italic;
      text-align: justify;
    }
  }

  div {
    flex-grow: 2;
  }
  .item-control {
    flex-grow: 1;
  }
  .item-body,
  .item-class-label {
    width: 100px;
  }
}

.item-class-label {
  margin-bottom: 10px;
}

.name,
.lair,
{
  margin-bottom: 10px;
}

form {
  &.actor-sheet {
    padding: 20px;
  }
}

nav{
  padding-bottom: 10px;
}


// Crew Coins
.crew-coins {
  @include custom_radio_square($coin_size);
  flex-wrap: wrap;
  max-width: 4 * ($coin_size + $coin_margin);

  label {
    margin-right: $coin_margin;
    margin-bottom: $coin_margin;
  }
}


// Reputation
.crew-reputation {
  border-top: 3px solid $almost_black;
  @include toothradio(17px, 50px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png");

  input:disabled + label {
    background-image: url(assets/teeth/stresstooth-black.png);
  }
}

// Turfs.

.turf-container {
  overflow-x: scroll;
  overflow-y: clip;
}

.turf-list {

  display: flex;
  flex-direction: column;
  width: 855px;

  .turf-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    *:first-child {
      margin-left: 0px;
    }
    *:last-child {
      margin-right: 0px;
    }
  }

  &.section-non-editable {
    .turf-block {
      @include turf_block(130px, 100px);
    }
  }

  &.section-editable {
    .turf-block {
      @include turf_block(130px, 125px);
    }
  }
}

.crew-hold {
  border-top: 3px solid $almost_black;
  @include toothradio_single(17px, 50px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png");
  width: 221px;
}

.crew-tier {

  background-color: $gray;
  height: 33px;
  width: 145px;
  display: flex;
  align-items: center;
  border-top: 3px solid $almost_black;

  @include custom_radio_round(18px, gray, $almost_white, $almost_black);

  > * {
    margin-right: 5px;
  }

}

.heat-wanted {
  //justify-content: none;
  .small-teeth{
    height: 20px;
    label{
      height: 100%;
      width: 100%;
      cursor: default;
    }
  }
}

.experience-clues-container {
  width: 340px;
  font-size: 12px;

  .experience-clues-description {
    font-weight: bold;
  }

  .experience-clues {
    font-style: italic;
  }
}

// Cohorts styling
.edgeflaw {

  input {
    display: none;

    &:checked {

      & + label {
        color: $red;
      }

    }
  }

}

.gang-expert-type-selector {

  .gang-type-boxes {
    flex-wrap: wrap;
  }
}

.cohorts {
  flex-wrap: wrap;

  .cohort-block-wrapper {
    width: 400px;
  }

  .label-stripe {
    align-items: center;
    cursor: pointer;
    margin-bottom: 0px;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .item-control {
    flex-grow: 0;
  }

  .cohort-body {
    img {
      border: 2px solid $almost_black;
      width: 1.75rem;
      height: 1.75rem;
      border-top: none;
    }

    > div {
      margin-bottom: 10px;
    }
  }

  .cohort-block-harm {
    justify-content: space-around;

    input[type="radio"] {
      display: none;

      &:checked + label {
        color: $almost_white;
        font-weight: bold;
        background-color: $almost_black;
      }
    }

    label {
      display: flex;
      align-items: center;
      justify-content: center;

      flex: 1 0 0;
      border: 2px solid $almost_black;
      border-top: none;
      border-left: none;
      padding: 0 5px;
      text-align: center;
    }
  }
}

.class-name {
  width: 512px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 48px;
  text-transform: uppercase;
  border: 3px solid $almost_black;

  .big-name {
    font-weight: bold;
    font-family: Kirsty, serif;
  }

  .big-description {
    font-size: 20px;
    font-family: "Crimson Text", serif;
    color: $almost_black;
  }
}

.big-teeth-section {

  border-top: 3px solid $almost_black;
  display: flex;
  flex-direction: row;
  margin-bottom: 0px;

  > * {
    margin-right: 10px;

    &:last-child {
      margin-right: 0px;
    }
  }

  &:last-child {
    margin-right: 0px;
  }

  // Stress
  .big-teeth {
    @include toothradio(17px, 50px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png");
  }

  /* Trauma */
  .small-teeth-container {

    .small-teeth-wrap {
      @include toothradio(17px, 50px, "assets/teeth/shorttooth-grey.png", "assets/teeth/shorttooth-red.png", false);
      flex-direction: column;

      .small-teeth {
        display: flex;
        flex-direction: row;
      }
    }
  }

  .trauma-list {
    @include check_underscore();
    justify-content: space-between;
    align-items: flex-start;
  }

}

header {
  margin-bottom: 10px;
}