@import "./variables.scss";

/* ----------------------------------------- */
/*  Basic Structure                          */
/* ----------------------------------------- */
.ose.sheet.actor.character {
  min-width: 450px;
  min-height: 550px;

  /* ----------------------------------------- */
  /*  Sheet Header                             */
  /* ----------------------------------------- */

  .sheet-header {
    .xp-bonus {
      top: -15px;
      right: 3px;
      color: $colorTan;
      font-size: 10px;
      position: absolute;
    }
  }

  /* ----------------------------------------- */
  /*  Sheet Body                               */
  /* ----------------------------------------- */
  .sheet-body {
    .tab {
      height: 100%;
    }
    .attributes-tab{
      justify-content: space-between;
      height: 100%;
      .attribute-group {
        position: relative;
        .modifiers-btn {
          position: absolute;
          left: 0;
          top: -5px;
        }
      }
    }
    .resources {
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;
      .attribute {
        flex: 0 0 55px;
        &.attribute-secondaries {
          flex: 0 0 40px;
          margin-bottom: 5px
        }
      }
    }
    .notes-tab {
      .inventory {
        .languages {
          margin: 2px;
          flex: 0 0 130px;
          .item-titles {
            .item-controls {
              flex: 0 0 20px;
            }
          }
          ol {
            height: 100px;
            overflow: auto;
            list-style: none;
            padding: 5px;
            li {
              margin: 0;
              &:hover .item-controls {
                display: flex;
              }
              .item-controls {
                flex: 0 0 20px;
                display:none;
              }
            }
          }
        }
        .description {
          margin: 2px;
          .editor {
            .tox .tox-tbtn {
              height: 24px;
            }
            height: 110px;
          }
        }
        &.notes {
          margin : 2px;
          .editor {
            height: 150px;
          }
        }
      }
    }
    .health {
      &.armor-class {
        background: url('/systems/ose/assets/shield.png') no-repeat center;
        background-size: 70px;
        .shield {
          text-align: right;
          padding: 0 14px;
          font-size: 18px;
        }
      }
        height: 70px;
        position: relative;
        .health-value {
          font-size: 16px;
          text-align: center;
          font-weight: bolder;
          text-shadow: 0 0 2px white, 0 1px 2px white, 1px 0 2px white, 1px 1px 2px white; 
        }
        .health-top {
          border-bottom: none;
          position: absolute;
          font-size: 24px;
          top: 10px;
          width: 70px;
          left: calc(50% - 35px);
        }
        .health-bottom {
          border-bottom: none;
          position: absolute;
          bottom: 8px;
          width: 40px;
          right: calc(50% + -20px);
        }
        .health-empty {
          background: url('/systems/ose/assets/heart_empty.png') no-repeat center;
          background-size: 70px;
          background-position: top;
        }
        .health-full {
          background: url('/systems/ose/assets/heart_full.png') no-repeat center;
          background-size: 70px;
          background-position: bottom;
        }
    }
    .saving-throw {
      .attribute-value.flat {
        line-height: 30px;
      }
    }
    .exploration {
      .attribute {
        margin: 4px;
        .attribute-name {
          text-align: left;
          flex: 1 0 60px;
          line-height: 25px;
          font-size: 12px;
        }
      }
    }
  }

  /* Encumbrance Bar */
  .encumbrance {
    height: 12px;
    background: $darkBackground;
    margin: 1px 15px 0 1px;
    border: 1px solid $colorDark;
    border-radius: 3px;
    position: relative;

    .encumbrance-bar {
      position: absolute;
      background: rgba(255, 0, 0, 0.6);
      height: 10px;
      border: 1px solid #777;
      border-radius: 2px;
    }

    .encumbrance-label {
      height: 10px;
      padding: 0 5px;
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 13px;
      line-height: 12px;
      text-align: right;
      color: #EEE;
      text-shadow: 0 0 5px #000;
    }

    .encumbrance-breakpoint {
      display: block;
      position: absolute;
      &.encumbrance-25 { left: 25% }
      &.encumbrance-50 { left: 50% }
      &.encumbrance-75 { left: 75% }
    }

    .arrow-up {
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 4px solid $colorFaint;
    }

    .arrow-down {
      top: 0;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid $colorFaint;
    }

    &.encumbered {
      .arrow-up { border-bottom: 4px solid $colorDark; }
      .arrow-down { border-top: 4px solid $colorDark; }
    }
  }
  /* ----------------------------------------- */
  /*  Item Controls                            */
  /* ----------------------------------------- */
}