@import "./variables.scss";

@keyframes notify {
  from {
    text-shadow: none;
  }
  to {
    text-shadow: -1px -1px 4px $colorOlive,  1px -1px 4px $colorOlive, -1px 1px 4px $colorOlive, 1px 1px 4px $colorOlive;
  }
}

.ose.sheet.actor {
  $detailsHeight: 44px;
  .blinking {
    font-weight: bold;
    animation: 0.8s ease-in 1s infinite alternate notify;
  }
  .panel {
    border: 1px solid $colorDark;
    .panel-title {
      color: whitesmoke;
      background: $darkBackground;
      line-height: 12px;
      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;
      }
      &.notify {
        input {
          font-weight: bold;
          animation: 0.8s ease-in 1s infinite alternate notify;
        }
      }
    }
  }
  .sheet-tabs {
    position: absolute;
    transform: rotate(90deg);
    top: 365px;
    right: -169px;
    width: 320px;
    z-index: -1;
    .item {
      padding: 2px 10px 0;
      margin-left: -5px;
      text-indent: 4px;
      background: url("/ui/parchment.jpg");
      border-top-right-radius: 4px;
      border-top-left-radius: 80px;
      box-shadow: 0 0 6px 1px $colorDark;
      font-size: 12px;
      filter: brightness(0.9);
      &.active {
        filter: none;
        z-index: 1;
        font-weight: bold;
        text-shadow: none;
        margin-bottom: -1px;
      }
    }
  }
  .sheet-body {
    padding: 5px 0;
    height: calc(100% - 140px);
    .tab {
      height: 100%;
    }
    .attributes {
      list-style: none;
      margin: 0;
      padding: 0;
      justify-content: space-evenly;
      .attribute {
        position: relative;
        border: 1px solid $colorTan;
        box-shadow: 0 0 2px $colorTan;
        .attribute-name {
          color: whitesmoke;
          padding: 2px;
          margin: 0;
          border: 1px solid $colorDark;
          background: $darkBackground;
          text-align: center;
        }
        &.ability-score {
          height: 40px;
          .attribute-value {
            line-height: 36px;
          }
        }
        .attribute-value {
          text-align: center;
          padding: 4px;
          .sep {
            flex: 0 0 5px;
            line-height: 24px;
          }
        }
      }
    }
    .attribute-group {
      flex: 0 0 88px;
      .attributes {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
        .attribute {
          display: flex;
          flex-direction: row;
          .attribute-name {
            width: 40px;
            margin: 0;
            line-height: 35px;
            a {
              margin: auto;
            }
          }
          &.saving-throw {
            .attribute-name {
              line-height: 16px;
              width: 80px;
            }
            .attribute-value {
              line-height: 29px;
            }
          }
          .attribute-value {
            width: 45px;
            flex-grow: 0;
            input {
              padding: 0;
            }
          }
        }
      }
    }
    .inventory {
      overflow: auto;
      .header-spells {
        line-height: 30px;
      }
      .item-titles {
        text-align: center;
        padding: 4px 0;
        border: 1px solid $colorDark;
        box-shadow: 0 0 5px $colorDark;
        .item-name {
          text-align: left;
          text-indent: 8px;
        }
        font-weight: 300;
        font-size: 13px;
        background: $darkBackground;
        color: white;
        input {
          color: white;
          margin: auto;
        }
      }
      .item-list {
        list-style: none;
        margin: 0;
        padding: 0;
        & > * {
          line-height: 30px;
        }
        .item-summary {
          font-size: 13px;
          padding: 0 4px;
          line-height: 20px;
          box-shadow: 0 0 3px $colorDark;
          .tag-list {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            .tag {
              margin: 1px 2px;
              border: 1px solid $colorFaint;
              font-size: 11px;
              line-height: 14px;
              background: $colorOlive;
              padding: 1px 4px;
              color: whitesmoke;
              border-radius: 3px;
              box-shadow: 0 0 1px $colorFaint;
            }
          }
        }
        .item-header {
          @extend %header-field !optional;
          padding: 0px;
          margin-bottom: 0px;
        }
        .item-entry {
          &:nth-child(even) {
            .item {
              background: rgba(0, 0, 0, 0.1);
            }
          }
        }
        .item {
          line-height: 30px;
          height: 30px;
          overflow: hidden;
        }
        .item-equipped {
          grid-area: item-equipped;
          justify-self: center;
        }
        .item-rollable {
          &:hover .item-image {
            background-image: url("/icons/svg/d20-grey.svg") !important;
            cursor: pointer;
          }
          .item-image:hover {
            background-image: url("/icons/svg/d20-black.svg") !important;
          }
        }
        .item-name {
          text-indent: 8px;
          text-align: left;
          overflow: hidden;
          height: 30px;
          margin: 0;
          line-height: 30px;
          flex-basis: 90px;
          .item-image {
            flex-basis: 30px;
            flex-grow: 0;
            background-size: contain;
            background-repeat: no-repeat;
          }
          h4 {
            margin: 0;
          }
        }
      }
      .icon-row {
        img {
          border: none;
          margin: 3px 1px;
          flex: 0 0 24px;
        }
        span {
          font-size: 12px;
          flex-grow: 0;
        }
      }
      .field-flex {
        flex: 1;
        text-align: left;
        font-size: 12px;
        text-indent: 8px;
      }
      .field-longer {
        text-indent: 8px;
        text-align: left;
        flex-basis: 90px;
        font-size: 12px;
      }
      .field-long {
        flex-basis: 65px;
        flex-grow: 0;
        text-align: center;
        font-size: 12px;
        &.memorize input {
          border-bottom: none;
          margin: 3px 0;
        }
      }
      .field-short {
        font-size: 12px;
        flex-basis: 45px;
        flex-grow: 0;
        text-align: center;
        &.quantity {
          display: flex;
          input {
            margin: 3px 0;
            border-bottom: none;
          }
        }
      }
      .item-caret {
        flex: 0 0 10px;
        margin: 0 4px;
        cursor: pointer;
      }
      .item-controls {
        font-size: 12px;
        flex-basis: 50px;
        flex-grow: 0;
        text-align: right;
        margin-right: 4px;
        .item-unequipped {
          color: rgba(0, 0, 0, 0.2);
        }
        a:hover {
          color: $colorCrimson;
          text-shadow: 0 0 5px $colorFaint, 1px 0 5px $colorFaint, 0 1px 5px $colorFaint, 1px 1px 5px $colorFaint;
        }
      }
      &.spells {
        .item-titles {
          line-height: 24px;
        }
        .item-controls {
          flex-basis: 45px;
        }
      }
    }
    .editor {
      height: 300px;
      padding: 4px;
    }
  }
}