// Colors
$lightgray: #CCC;
$gray: #999;
$red: red;
$almost_black: #191813;
$almost_white: #EEEFFF;

// Imports
@import 'mixin.scss';

/*
 * General Styles
 */
* {
  font-family: Georgia, "Bitstream Charter", "Times New Roman", serif;

  header {
    margin-bottom: 10px;
  }

  ul {
    list-style: none;
  }

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

  textarea {
    margin-top: 10px;
    margin-bottom: 20px;
  }

  td {
    padding: 5px;
  }

  section {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    > *:not(.label-stripe) {
      margin-right: 10px;

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

    .grow-one {
      flex-grow: 1;
    }

    .grow-two {
      flex-grow: 2;
    }

    &.experience {
      margin-bottom: 0px;
      justify-content: center;
    }
  }

  nav {
    margin-bottom: 10px;
  }

  .editor,
  .editor-content {
    min-height: 280px;
  }

  .flex-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .flex-vertical {
    display: flex;
    flex-direction: column;
  }

  .black-label {
    background-color: $almost_black;
    color: $almost_white;
    font-size: 21px;
    text-align: center;
    padding: 0px 5px;
    height: 30px !important;
    text-transform: capitalize;
  }

  .gray-label {
    background-color: $gray;
    color: $almost_black;
    font-size: 21px;
    text-align: center;
    padding: 0px 5px;
    height: 30px !important;
    text-transform: capitalize;
  }

  .label-stripe {
    text-transform: uppercase;
    background-color: $almost_black;
    color: $almost_white;
    margin-bottom: 10px;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    font-weight: bold;
  }

  .label-stripe-gray {
    text-transform: uppercase;
    background-color: $gray;
    margin-bottom: 10px;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    font-weight: bold;
  }

  .description {
    font-style: italic;
  }

  // Stress and Trauma

  .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");
        flex-direction: column;

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

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

  }

  // Abilities
  #abilities {

    .item-name {
      width: 70px;
    }
    .item-body {
      width: auto;
    }
    .item-description {
      width: 200px;
    }

  }

  // Experience teeth
  .teeth-experience {
    @include toothradio(10px, 30px, "assets/teeth/stresstooth-halfgrey.png", "assets/teeth/stresstooth-red.png");
    position: absolute;
    top: 0px;
    right: 10px;
  }

  #harm-armor {
    
    display: flex;

    // Harm
    #character-harm {
  
      width: 100%;
  
      table {
        width: 100%;
  
        th {
          background-color: $almost_black;
          color: $almost_white;
        }
  
        input[type="text"] {
          width: 100%;
        }
      }
    }
  
    // Clock
    #character-health-clock {
      @include clock(4, 80, $almost_white, $red);
      margin: 0 auto;
    }

    #character-armor-uses {

      div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
    }
  }


  #attributes {

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

    .stripe {
      background-color: $almost_black;
      color: $almost_white;
      font-size: 17px;
      padding-left: 5px;
    }

    .attributes-exp {

      position: relative;
      margin-bottom: 10px;

      .stripe-tooth-body {
        @include toothradio(10px, 30px, "assets/teeth/xptooth-white.png", "assets/teeth/xptooth-red.png");
        position: absolute;
        top: 0px;
        right: 0px;
      }
    }
    
    .attributes-container {
      display: flex;
      margin: 5px 0px;
      @include custom_radio(15px, 15px);

      * {
        margin-right: 5px;
      }
    }
  }

  // ITEM
  .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,
  #alias {
    margin-bottom: 10px;
  }

  .profile-img {
    margin: 0px 30px;
  }

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

  .coins {
    @include custom_radio_square($coin_size);
    flex-wrap: wrap;

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

      &[for$="0"] {
        border-width: 2px;
      }
    }

    &.coins-hands {
      width: 36px;
    }

    &.coins-stashed {
      width: 190px;
    }
    
  }
  
  // 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="disabled"] + label {
      background-image: url(assets/teeth/stresstooth-black.png);
    }
  }

  // Turfs.

  #turf-list {

    display: flex;
    flex-direction: column;

    .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;
  }

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

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

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

  .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;
    }

    .big-description {
      font-size: 20px;
      color: $almost_black;
    }
  }

  // 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 {
      margin-bottom: 0px;
    }

    .cohort-body {
      > 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 {
        border: 2px solid $almost_black;
        border-top: none;
        padding: 5px;
      }
    }
  }
}