@import "./variables.scss";

.ose.sheet.actor {
  $detailsHeight: 44px;

  ul li {
    list-style: none;
    padding: 0;
  }

  .panel {
    border: 1px solid $colorDark;
    .panel-title {
      color: whitesmoke;
      background: $colorDark;
      line-height: 14px;
      height: 20px;
      text-align: center;
      margin: 0;
      padding: 4px;
      display: flex;
      h4 {
        flex: 1;
      }
      .item-controls {
        font-size: 12px;
        flex: 0 0 18px;
      }
    }
    .panel-content {
      margin: 0;
      padding: 0;
    }
  }
  
  /* Header Summary Details */
  .header-details {
    h1 {
      input {
        margin: 0 0 10px 0;
      }
    }
  }
  .profile-img {
    border: 0;
    flex: 0 0 145px;
    height: 145px;
  }

  .summary {
    flex: 0 0 100%;
    height: $detailsHeight;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: none;

    li {
      height: calc(100% - 6px);
      float: left;
      margin: 2px 0;
      padding: 0;
      line-height: 30px;
      color: $colorOlive;
      position: relative;
      label {
        line-height: 10px;
        position: absolute;
        font-size: 10px;
        color: $colorOlive;
        bottom: 0;
        left: 12px;
      }
    }
  }
  .sheet-tabs {
    color: whitesmoke;
    background: $colorDark;
    margin: 4px 0 0;
    border: 1px solid $colorDark;
    .item {
      padding: 2px;
      &.active {
        background: $colorCrimson;
      }
    }
  }
  .sheet-body {
    padding: 5px 0;
    border: 1px solid $colorDark;
    border-top: none;
    height: calc(100% - 175px);
    .attributes {
      margin: 0;
      padding: 0;
      .attribute {
        position: relative;
        margin: 10px;
        border: 1px solid $colorTan;
        .attribute-name {
          color: whitesmoke;
          padding: 2px;
          margin: 0;
          background: $colorDark;
          text-align: center;
        }
        .attribute-value {
          padding: 4px;
          display: flex;
          flex-direction: row;
          &.multiple input {
            min-width: 28px;
          }
        }
        .attribute-mod {
          position: absolute;
          color: $colorTan;
          right: 5px;
          top: 0;
          font-size: 13px;
        }
      }
    }
    .attribute-group {
      flex: 0 0 105px;
      .attributes {
        .attribute {
          display: flex;
          flex-direction: row;
          .attribute-name {
            width: 40px;
            margin: 0;
            line-height: 28px;
            a {
              margin: auto;
            }
          }
          &.saving-throw .attribute-name {
            line-height: 16px;
            width: 80px;
          }
          .attribute-value {
            width: 45px;
            flex-grow: 0;
          }
        }
      }
    }
    .editor {
      height: 300px;
      padding: 4px;
    }
  }
}