@charset "UTF-8";

/* © DialogueTrainer */

@use 'base' as *;

$noSelectors: 'h1, h2, label, .d, th, button, ul li';
$indexWidth: 170px;
$font-family: 'Open Sans', 'Frutiger', 'Helvetica', 'Arial', sans-serif;

#metadata {
  width: min-content;
  max-width: 100%;
  margin: 0 auto;
  font-family: $font-family;
  color: #777;

  .index {
    width: $indexWidth;
    box-sizing: border-box;

    h1 {
      opacity: .5;
    }

    input[type=text].search {
      background-color: $slate-50;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style-type: none;

      a {
        display: block;
        padding: $spacing-2;
        color: inherit;
        text-decoration: none;

        &:hover, &.active {
          color: $col-text-primary-dark;
          background-color: $slate-100;
          border-radius: $rounded-base;
        }
      }
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    gap: $spacing-5;
  }

  #{$noSelectors} {
    user-select: none;
  }

  h1, h2, h3, h4, h5, h6 {
    padding-top: 2em;
    padding-bottom: .5em;
    margin: 0;

    &:first-child {
      padding-top: 0;
    }
  }

  textarea {
    resize: vertical;
  }

  #meta-property-values, #meta-character-property-values {
    display: contents;
  }

  .content, #meta-property-values {
    > .category {
      padding: $spacing-5;
    }
  }

  .category, #meta-property-values {
    background-color: $slate-100;

    // Nested items
    .category {
      h1, h2, h3, h4, h5, h6 {
        margin-top: 1em;
      }

      h1, h2 {
        &:first-child {
          margin-top: 0;
        }
      }

      .item {
        padding-block: $spacing-2;
      }
    }
  }

  .container.table {
    overflow: auto;
  }

  .item {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    &::after {
      content: '';
      display: block;
      clear: both;
    }

    > .itemLabel {
      margin-block: 2px;
    }

    // Editor labelControlOrder
    &.singleLineLabelContainer, &.singleCellContainerLabel {
      flex-direction: row;

      > *:not([type=checkbox], [type=radio], [type=range]) {
        flex: 1 1 auto;
      }
    }

    &.container {
      flex-direction: column;
      align-items: stretch;
      > *:first-child { display: none; }
    }

    &.twoLineLabelContainer, &.twoLineContainerLabel {
      flex-direction: column;
      align-items: stretch;
    }

    &.singleCellContainerLabel > *:first-child,
    &.twoLineContainerLabel > *:first-child {
      order: 1;
    }
  }

  table {
    width: 100%;

    th, td {
      padding: $spacing-1 $spacing-2;
      font-size: .9rem;
      text-align: left;
      white-space: nowrap;

      &:first-child {
        padding-left: 0;
      }

      &.fill {
        width: 100%;
      }
    }

    th {
      opacity: .5;
    }

    tr {
      td {
        border-bottom: 1px solid rgba(black, .05);

        span {
          display: block;
          font-size: .75em;
          font-style: italic;
          opacity: .5;
        }
      }

      &:last-of-type td {
        border-bottom-width: 0;
      }
    }
  }

  input[type=checkbox] {
    margin-inline-end: $spacing-2;
    margin-block-start: $spacing-1;
    flex-shrink: 0;
  }

  label::first-letter {
    text-transform: uppercase;
  }

  .description {
    display: block;
    margin-bottom: $spacing-1;
    font-size: .8em;
    opacity: .7;

    &:empty {
      display: none;
    }
  }

  .inputgroup {
    display: flex;

    select {
      flex-grow: 1;
    }

    button {
      flex: 0 0 auto;
    }
  }
}
