/**
 * CSS for the AUX Components tools in the WordPress admin
 * https://(siteurl)/wp-admin/tools.php?page=aux-components
 *
 * This css is only loaded in the WordPress admin.
 *
 * Enqueue function: HeadService::enqueueLocalStyle
 * Enqueue file: /inc/WP_AUX/Entities/Admin/AuxComponents/AuxComponentsPageEntity.php
 *
 * @since 1.0.0
 */

#TB_ajaxContent {
  position: relative;
}

code {

  &.dir-path,
  &.file-path {
    font-size: 11px;
    padding-top: 2px;
    padding-bottom: 1px;
    position: relative;
    border-radius: 3px;

    &:before {
      content: '';
      font-weight: bold;
      background-color: darkgray;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 18px;
      text-align: center;
    }
  }

  &.dir-path {
    padding-right: 21px;

    &:before {
      right: 0;
      border-radius: 0 3px 3px 0;
    }

    &.dir-path-base {
      &:before {
        content: 'B';
      }
    }

    &.dir-path-field {
      &:before {
        content: 'F';
      }
    }

    &.dir-path-collection {
      &:before {
        content: 'C';
      }
    }

    &.dir-path-group {
      &:before {
        content: 'G';
      }
    }
  }

  &.file-path {
    padding-left: 21px;

    &.file-path-base {
      &:before {
        content: 'B';
      }
    }

    &.file-path-field {
      &:before {
        content: 'F';
      }
    }

    &.file-path-collection {
      &:before {
        content: 'C';
      }
    }

    &.file-path-group {
      &:before {
        content: 'G';
      }
    }

    &:before {
      left: 0;
      border-radius: 3px 0 0 3px;
    }
  }
}

.field-use-options {
  pre {
    position: relative;
    background-color: rgba(176, 224, 230, 0.28);
    font-family: Consolas, Monaco, monospace;
    padding: 24px 8px 6px 8px;
    font-size: 11px;

    &:before {
      display: block;
      background: lightblue;
      content: '';
      width: 64px;
      text-align: center;
      position: absolute;
      padding: 1px 5px;
      top: 0;
      left: 0;
      content: attr(data-use-type);
      font-size: 10px;
      text-transform: uppercase;
    }
  }
}

.field-active {
  .tb-close-icon {
    display: none;
  }

  .component-details {
    overflow: hidden;
    height: 100%;
  }
}

.field-details {
  display: none;

  &.active {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    background-color: white;
  }

  .field-parent-path {
    span {
      cursor: pointer;
    }

    span:after {
      content: ' >>> ';
      display: inline;
    }
  }
}

.details-summary {
  margin-bottom: 1.25rem;
  font-style: italic;
}

.fields-summary,
.field-details-section {
  margin-bottom: 1.25rem;

  h3 {
    margin-bottom: 0;
  }

  p {
    margin-top: 0;
    margin-bottom: 4px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

table {
  tbody {
    tr {
      th {
        text-align: left;
      }
    }
  }
}

.fields-list,
.field-properties {
  width: 100%;
  margin-top: 1.25rem;
  border-collapse: collapse;

  tr {
    border-bottom: 1px solid #c2c2c2;
    vertical-align: top;
  }

  tbody {
    tr {
      th {
        &[data-depth='1'] {
          padding-left: 16px;
        }

        &[data-depth='2'] {
          padding-left: 32px;
        }

        &[data-depth='3'] {
          padding-left: 48px;
        }

        &[data-depth='4'] {
          padding-left: 64px;
        }
      }
    }
  }

  .component-field-label {
    display: block;
    white-space: nowrap;
    text-decoration: none;

    .field-label {
      display: inline-block;
    }
  }

  .field-property-type-options,
  .field-property-value-options {
    cursor: pointer;

    &:after {
      display: inline-block;
      content: '+';
      width: 14px;
      height: 14px;
      line-height: 12px;
      background-color: lightgreen;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
    }
  }

  .field-property-options {
    display: none;
    border-collapse: separate;
    border-spacing: 0;
    -webkit-border-vertical-spacing: 2px !important;

    &.active {
      display: table;
    }

    >div {
      display: table-row;
      vertical-align: middle;
      border-bottom: solid 1px white;

      span {
        display: table-cell;
        line-height: 11px;
        padding: 0px 4px 0px 2px;
        border: solid 1px lightblue;

        &:first-child {
          font-family: Consolas, Monaco, monospace;
          font-size: 10px;
          background-color: lightblue;
          padding: 2px 4px 1px 2px;

          &:before {
            content: '::';
            display: inline;
          }
        }

        &:last-child {
          font-size: 12px;
          padding-left: 3px;
        }
      }
    }
  }
}

.field-property-source-cell {
  width: 39px;
  position: relative;

  .field-property-declared-at {
    width: 15px;
    padding: 2px 4px 1px 16px;
    font-size: 10px;
    font-family: Consolas, Monaco, monospace;
    background-color: lightgrey;
    position: absolute;
    top: 2px;
    left: 0;
    background: rgba(0, 0, 0, .07);
    line-height: 12px;
    height: 12px;
    text-align: right;

    &:before {
      font-weight: bold;
      background-color: darkgrey;
      font-size: 9px;
      line-height: 14px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 14px;
      text-align: center;
      display: inline;
    }

    &.field-property-declared-at-F {
      &:before {
        content: 'F';
      }
    }

    &.field-property-declared-at-B {
      opacity: .72;

      &:before {
        content: 'B';
      }
    }

    &.field-property-declared-at-T {
      opacity: .6;

      &:before {
        content: 'T';
      }
    }

    &.field-property-declared-at-R {
      opacity: .6;

      &:before {
        content: 'R';
      }
    }
  }
}

.field-indicators {
  display: inline-block;

  &.field-indicators-legend {
    display: block;
  }

  .field-indicator {
    display: inline-block;
    margin-right: 2px;
    content: '';
    width: 16px;
    height: 16px;
    font-size: 10px;
    text-align: center;
    border-radius: 3px;
    background-color: rgba(176, 224, 230, 0.28);

    &:before {
      display: inline-block;
      line-height: 10px;
      top: -1px;
      position: relative;
    }

    &.field-required-indicator {
      color: indianred;

      &:before {
        content: 'R';
      }
    }

    &.field-conditional-indicator {
      color: green;

      &:before {
        content: 'C';
      }
    }

    &.field-collection-indicator {
      color: darkgrey;

      &:before {
        content: '+';
      }
    }
  }
}

.aux-documentation-link {
  display: inline-block;
  /*display: none;*/
  font-size: 10px;
  padding: 3px 5px 4px;
  margin-left: 3px;
  background-color: maroon;
  color: white;
  text-decoration: none;
  border-radius: 3px;
  font-weight: normal;
  line-height: 10px;

  &:hover,
  &:active {
    color: lightgrey;
  }

  .dashicons {
    width: 12px;
    height: 10px;
    font-size: 11px;
    position: relative;
    top: -1px;
  }
}

.aux-audit-legend {
  &.field-properties-legend {
    margin-top: 8px;
  }

  strong {
    font-size: 13px;
    margin-bottom: 3px;
  }
}
