@import 'mixin.scss';

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

  ul {
    list-style: none;
  }

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

  textarea {
    margin-top: 10px;
  }

  td {
    padding: 5px;
  }

  .section {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    > * {
      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;
    }
  }

  .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: black;
    color: white;
    font-size: 21px;
    text-align: center;
    padding: 0px 5px;
    height: 30px !important;
    text-transform: capitalize;
  }

  .label-stripe {
    text-transform: uppercase;
    background-color: #888;
    margin-bottom: 10px;
    position: relative;
    padding-left: 10px;
  }

  // Stress and Trauma

  #stress-trauma {

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

    > * {
      margin-right: 10px;
    }

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

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

    /* Trauma */
    #character-trauma-container {

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

        #trauma-teeth {
          display: flex;
          flex-direction: row;
        }
      }
    }

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

  }

  #abilities {

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

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

  }

  #harm-armor {
    
    display: flex;

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

    #character-armor-uses {

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


  #attributes {

    display: flex;
    flex-direction: column;

    .stripe {
      background-color: black;
      color: 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;
    }
  }

  #name,
  #alias {
    margin-bottom: 10px;

    // color: red;
    // background-image: url("assets/brush/dry-brush-stroke-3.png");
    // background-repeat: no-repeat;
    // background-size: cover;
    // height: 67px;

    // input {
    //   color: red;
    //   border: none;
    //   background: none;
    // }
  }

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

  .coins {
    @include custom_radio_square(15px, 15px);
    flex-wrap: wrap;

    label {
      margin-right: 3px;
      margin-bottom: 3px;

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

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

    &.coins-stashed {
      width: 190px;
    }
    
  }

  // Reputation


  // Stress
  #crew-reputation {
    border-top: 2px solid 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);
      }
    }
  }

}