@navHeight: 30px;
@headerHeight: 100px;

/* ----------------------------------------- */
/*  All PF1 Apps                           */
/* ----------------------------------------- */

.pf1 {
  header {
    flex: 0;
  }

  .footnote {
    color: var(--pf1-tan);
  }

  div.group-container {
    position: relative;
    border: 1px solid var(--color-border-dark-2);
    border-radius: 4px;
    padding: 4px;
    margin: 2px;
    margin-top: 20px;

    & > .group-title {
      position: absolute;
      top: -50%;
    }
  }

  a.inline-action {
    position: relative;
    margin-left: 4px;

    i.absolute {
      position: absolute;
      left: -2px;
      top: -2px;
      font-size: var(--font-size-12);
      background: black;
      color: var(--color-text-light-highlight);
      padding: 1px;
      border-radius: 4px;
      height: 10px;
      line-height: 8px;
    }

    &[data-action="recoverAmmo"],
    &[data-action="forceRecoverAmmo"] {
      &.recovered {
        color: #00aa00;
      }
      &.recovery-failed {
        color: #aa0000;
      }
    }
  }

  input[type="number"]::placeholder,
  input[type="text"]::placeholder,
  .placeholder {
    color: var(--pf1-tan);
  }

  input[type="text"]:disabled,
  input[type="text"][disabled] {
    color: var(--pf1-tan);
  }

  .align-left {
    text-align: start;
  }
  .align-center {
    text-align: center;
  }
  .align-right {
    text-align: end;
  }

  li {
    align-items: center;
  }

  .window-content {
    background: var(--pf1-sheet-background);
    font-size: var(--font-size-13);
    color: var(--color-text-dark-primary);
    overflow: hidden;
  }

  /* ----------------------------------------- */
  /*  Element Styles                           */
  /* ----------------------------------------- */

  // Item Sheet form fields
  :is(input[type="text"], input[type="number"], select) {
    border: 1px solid var(--pf1-tan);
    background: var(--pf1-bg-dark-0);
    color: var(--color-text-dark-primary);
  }

  form.editable {
    // Hovered Fields
    input:is([type="text"], [type="number"]) {
      &:is(:hover, :focus) {
        &:not(:disabled, [disabled], :read-only) {
          border: 1px solid #111;
          box-shadow: 0 0 8px red;
        }
      }
    }

    :is(select, input[type="checkbox"]) {
      &:is(:hover, :focus) {
        &:not(:disabled, [disabled]) {
          border: 1px solid #111;
          box-shadow: 0 0 8px red;
        }
      }
    }
  }

  // Disabled Fields
  // <select> misbehaves with :read-only
  :is(input, textarea, select):is(:disabled, [disabled]),
  // :read-only is only supported by text and number
  input:is([type="text"], [type="number"]):read-only {
    color: var(--pf1-olive);
    opacity: 0.7;
  }

  // Checkbox Labels
  label.checkbox {
    white-space: nowrap;
    flex: auto;
    margin: 0;
    line-height: 1.5;
    font-size: var(--font-size-12);

    input[type="checkbox"] {
      height: auto;
      position: relative;
      top: 3px;
    }
  }

  /* Form Groups */
  .form-group {
    gap: 0 3px;

    label {
      &:first-child,
      &.checkbox,
      &.header {
        text-align: left;
        font-weight: bold;
        white-space: nowrap;
        color: var(--pf1-olive);
      }
    }

    .buff-flags {
      display: flex;
      flex-wrap: wrap;
      min-width: 100%;
      max-height: 76px;
      overflow-y: auto;
      .scrollbar();

      label.checkbox {
        flex: 0 0 50%;
        text-align: left;
      }
    }

    .form-fields {
      gap: 3px;
    }

    .group {
      flex: 1 1 96px;

      label {
        flex: 1;
        font-weight: normal;
      }

      a {
        flex: 0 0 16px;
      }
    }
  }

  // Stacked Groups
  .form-group.stacked {
    label {
      flex: 0 0 100%;

      &.checkbox {
        text-align: left;
      }
    }

    .data-selector {
      flex: 1;

      label {
        font-weight: normal;
        flex: 1;
      }

      .entry-selector {
        flex: 0 0 16px;
      }
    }
  }

  // Form Headers
  .form-header {
    margin: 0;
    padding: 0 2px;
    .modesto();
    font-size: var(--font-size-24);
    border-top: var(--pf1-border-groove);
    border-bottom: var(--pf1-border-groove);
  }

  h4.form-header {
    font-size: var(--font-size-20);
  }

  .tag-list {
    display: flex;
    row-gap: 1px;
    column-gap: 2px;
    flex-wrap: wrap;

    list-style: none;
    margin: 0;
    padding: 0;

    .tag {
      height: min-content;
      white-space: nowrap;
    }
  }

  /* Tags */
  .tag {
    display: inline-block;
    flex: 0;
    padding: 0 3px;
    font-size: var(--font-size-11);
    line-height: 1.2;
    border: 1px solid #999;
    border-radius: 3px;
    background: var(--pf1-bg-dark-0);

    &.type1 {
      background: rgba(255, 0, 0, 0.1);
    }
    &.type2 {
      background: rgba(0, 255, 0, 0.1);
    }
    &.type3 {
      background: rgba(0, 0, 255, 0.1);
    }
  }

  .help-icon {
    flex: 0;
  }

  .help-text {
    background-color: rgba(10, 0, 0, 0.05);
    border: dotted var(--pf1-bg-dark-1);
    flex: 0 0 24px;
    padding: 3px;
    margin-bottom: 3px;
  }

  .item-links {
    flex: 0 0 24px;
  }

  .fake-inline-roll {
    background: #ddd;
    padding: 1px 4px;
    border: 1px solid #4b4a44;
    border-radius: 2px;
    white-space: nowrap;
    word-break: break-all;
  }
}

/* ----------------------------------------- */
/*  Resistance Selectors Specifically             */
/* ----------------------------------------- */

.pf1.resistance-selector {
  form {
    max-height: 720px;
    height: 100%;
  }

  ol li {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: fit-content 2em 2em;
  }
}

/* ----------------------------------------- */
/*  Doc Sheets Specifically               */
/* ----------------------------------------- */

.pf1.sheet {
  .window-content {
    overflow: hidden;
    padding: 5px;
    background: var(--pf1-sheet-background);
    font-size: var(--font-size-13);
    color: var(--color-text-dark-primary);

    form {
      height: 100%;
      overflow: hidden;

      display: flex;
      flex-flow: column nowrap;
      gap: 2px;
    }

    .tab {
      height: 100%;
      gap: 2px;

      &.active {
        display: flex;
        flex-flow: column nowrap;

        .editor {
          flex: 1;
        }
      }

      section {
        height: 100%;
        overflow: hidden;

        // Summary tab subdetails fix
        &.subdetails-body {
          overflow: hidden auto;
          .scrollbar();
        }

        &.secret {
          height: unset;
          overflow: unset;
        }
      }
    }
  }

  // Item sheets do not use <section>
  &.item {
    .window-content {
      .tab {
        overflow: hidden scroll;
        .scrollbar();

        // Links, description and changes tabs use different scrolling
        &[data-group="description"],
        &[data-tab="links"] {
          overflow: hidden;
        }

        // Fix editor size being odd for item sheet descriptions
        section.description-body {
          height: unset;
        }
      }
    }
  }

  // Overflow long names
  .char-name input,
  .item-name input,
  .item-name h4 {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* ----------------------------------------- */
  /*  TinyMCE                                  */
  /* ----------------------------------------- */

  .notImp {
    text-decoration: firebrick dotted underline;
    text-decoration-skip-ink: none;
    &::after {
      color: firebrick;
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: "\f071";
      text-shadow: 0 0 4px white;
    }
  }

  .needSteps {
    text-decoration: goldenrod double underline;
    &::after {
      color: goldenrod;
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: "\f14a";
      text-shadow: 0 0 4px black;
    }
  }

  /* ----------------------------------------- */
  /*  Sheet Header                             */
  /* ----------------------------------------- */
  .sheet-header {
    flex: 0 0 @headerHeight;
    border-bottom: var(--pf1-border-groove);
    align-items: center;

    :is(h1, h2, h3, h4, h5) {
      .modesto();
    }

    /* Item Name */
    h1 {
      flex: 1;
      border-bottom: none;
      margin: 0;
      padding: 0;

      input {
        font-size: calc(var(--font-size-28) * 1.2);
        font-variant-caps: small-caps;
        margin: 0;
      }
    }

    /* Profile Image */
    img.profile {
      flex: 0 0 @headerHeight;
      width: @headerHeight;
      height: @headerHeight;
      object-fit: contain;
      border: none;
      border-right: var(--pf1-border-groove);
    }

    /* Header Summary Details */
    .summary {
      display: flex;
      flex: 0 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      border-top: var(--pf1-border-groove);

      li {
        display: inline-flex;
        width: 33.33%;
        padding: 0 3px;
        border-right: var(--pf1-border-groove);
        border-bottom: var(--pf1-border-groove);
        color: var(--pf1-olive);
        height: 1.7em;

        input {
          vertical-align: top;
        }

        > label {
          display: inline-flex;
          align-items: center;
          white-space: nowrap;

          input.value {
            text-align: center;
          }
        }
      }
    }

    .header-details {
      .summary {
        input[type="checkbox"] {
          margin: 0;
          height: 16px;
        }
      }
    }
  }

  /* ----------------------------------------- */
  /*  Sheet Navigation                         */
  /* ----------------------------------------- */

  .sheet-navigation {
    flex: 0;
    .modesto();
    background: rgba(155, 155, 155, 0.3);
    border: 1px solid transparent;
    border-radius: 12px 12px 0 0;
    font-size: var(--font-size-20);
    column-gap: 2px;

    .item {
      line-height: var(--pf1-nav-height);
      height: var(--pf1-nav-height);
      margin: 0;
      white-space: nowrap;
      border: 1px solid transparent;
      border-radius: 12px 12px 0 0;
      flex: 1;

      &.active {
        background: rgba(155, 155, 155, 0.5);
      }
      &:hover {
        background: rgba(155, 155, 155, 0.2);
      }
    }

    &.tabs {
      border-bottom: var(--pf1-border-groove);
    }
  }

  /* ----------------------------------------- */
  /*  Sheet Body                               */
  /* ----------------------------------------- */

  .primary-body {
    flex: 1;
    overflow: hidden;

    .tab {
      &.spellbook {
        .spellbooks-body {
          overflow: hidden;
        }
      }
    }
  }

  /* ----------------------------------------- */
  /*  List Filters                             */
  /* ----------------------------------------- */

  .filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    align-self: end;
    column-gap: 6px;

    .filter-title {
      flex: 3;
    }

    .filter-item {
      text-align: center;
      font-size: var(--font-size-12);
      border-bottom: 3px solid var(--color-border-light-secondary);
      white-space: nowrap;

      &:hover {
        text-shadow: 0 0 4px red;
        border-bottom: 3px solid var(--pf1-tan);
      }

      &.active {
        border-bottom: 3px solid var(--pf1-crimson);
      }
    }
  }

  // Clickable SVG icons
  a > .icon-pf {
    &:hover {
      opacity: 0.5;
    }
  }

  div.info {
    text-align: center;
    justify-content: center;

    span {
      color: var(--pf1-tan);
      flex: 0;

      a {
        color: #7e78dc;
      }
    }
  }
}

/* ----------------------------------------- */
/* Trait Selector
/* ----------------------------------------- */

.resistance-selector {
  .trait-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    .scrollbar();
  }

  a.resistance-control.add-entry {
    margin: 0.5em 0 0.7em 1em;
    display: block;
  }
}

.pf1.resistance {
  table {
    border: 1px solid rgb(136, 136, 136);
    font-weight: normal;
    table-layout: fixed;

    thead {
      background-color: #3c6d98;
    }

    tbody {
      tr {
        background-color: white;
      }

      tr:nth-child(even) {
        background-color: #f3f3f3;
      }
    }

    th.resistance-control,
    td.resistance-control {
      width: 16px;
    }

    tr {
      height: 16px;
    }
  }
}

.pf1.entry,
.notes {
  table {
    border: 1px solid rgb(136, 136, 136);
    font-weight: normal;
    table-layout: fixed;

    th.entry-control,
    td.entry-control {
      width: 16px;
    }

    tr {
      height: 16px;
    }
  }

  a.entry-control.add-entry {
    margin: 0.5em 0 0.7em 1em;
    display: block;
  }
}

.pf1.entry {
  thead {
    background-color: #3c6d98;
  }

  tbody {
    tr {
      background-color: white;
    }

    tr:nth-child(even) {
      background-color: #f3f3f3;
    }
  }
}

.config .config-icon {
  opacity: 0;
}
.config:hover .config-icon {
  color: rgb(136, 136, 136);
  opacity: 1;
}

.pf1 .currency-transfer {
  .form-group:nth-child(5) {
    background-color: rgba(170, 170, 170, 0.3);
    border-top: 1px dashed #aaa;
  }

  .form-group > label {
    flex: 0 0 150px;
  }

  .form-fields {
    input,
    span {
      flex: 2;

      font-weight: bold;

      &.text-box {
        line-height: 22px;
        border: 1px dotted #777;
        color: #333;
      }

      &:not(.text-box) {
        color: black;
        border: initial;
        border-bottom: 2px groove #eeede0;
      }
    }

    button > i:only-child {
      margin: 0;
    }
  }

  .form-group.currency-total .form-fields {
    label:nth-child(1) {
      text-align: right;
    }
    label:nth-child(2) {
      flex: initial;
    }
    label:nth-child(3) {
      text-align: left;
      flex: 1;
    }
  }
}

/* ----------------------------------------- */
/* Script Editor
/* ----------------------------------------- */

.pf1.script-editor {
  .form-group.command {
    flex: 1;
    flex-direction: column;
    align-items: unset;

    label {
      flex: 0;
    }

    textarea {
      flex: 1;
    }
  }

  footer {
    flex: 0 0 32px;
  }
}

/* ----------------------------------------- */
/* Damage Type Selector
/* ----------------------------------------- */
.pf1.damage-type-selector {
  display: flex;
  flex-direction: column;
  height: 100%;

  .damage-type-container {
    flex: 0 0 calc(100% - 72px);
    height: calc(100% - 72px);

    .damage-type-categories {
      border-right: 1px dashed black;
      flex: 2;
      overflow-y: auto;
      .scrollbar();
      height: 100%;
    }

    .damage-types,
    .damage-modifiers {
      label {
        display: inline-block;
        width: 100%;
        text-align: center;
        font-weight: bold;
        font-size: var(--font-size-24);
      }

      .icon-pf {
        font-size: var(--pf1-damage-icon-size);
        text-shadow: 0 0 4px black;
        background: none;

        width: 64px;
        height: 64px;
      }
    }

    .damage-modifiers {
      overflow-y: auto;
      .scrollbar();
      height: 100%;
    }
  }

  .misc-container {
    div.custom {
      flex: 1;
    }
  }

  .icon-row {
    display: grid;
    flex-flow: row wrap;
    grid-template-columns: repeat(auto-fit, 80px);
    grid-gap: 0.2rem;
    padding: 0.2rem;

    .damage-type {
      cursor: pointer;
      width: 80px;
      padding: 4px;
      align-items: center;
      border-radius: 4px;

      display: grid;
      justify-items: center;
      grid-row-gap: 2px;

      input[type="checkbox"] {
        cursor: pointer;
      }

      img {
        height: 72px;
        width: 72px;
        object-fit: cover;
        object-position: 50% 0;
        border: none;
      }

      span {
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        display: -webkit-inline-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      &:hover {
        background: rgba(155, 155, 155, 0.2);
        span.name {
          text-shadow: 0 0 10px red;
        }
      }

      &.toggled {
        background: rgba(155, 155, 155, 0.5);
        span.name {
          text-shadow: 0 0 10px red;
        }
      }
    }
  }
}

.damage-type-visual {
  display: flex;
  flex-flow: row nowrap;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  border: 1px solid var(--pf1-tan);
  border-radius: 3px;
  background-color: var(--pf1-bg-dark-0);
  vertical-align: middle;
  line-height: 1.7;
  white-space: nowrap;
  overflow: hidden;

  &.empty {
    display: flex;
    white-space: nowrap;
  }

  &:hover:not(.disabled) {
    cursor: pointer;
    box-shadow: 0 0 8px red;
  }

  & > span {
    text-align: center;
    word-break: keep-all;
  }

  .damage-type {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    .icon-pf {
      background: none;
      border: none;
      font-size: var(--font-size-16);
      text-shadow: 0 0 1px black;
      width: 16px;
      height: 16px;
    }
  }
}

.pf1.custom-skill {
  .compendium-controls {
    flex: 0;
  }

  .compendium-page {
    overflow-x: hidden;
  }
}

.app.pf1.skill-editor {
  input:invalid {
    background-color: rgba(255, 0, 0, 0.1);
  }
}