@import '../table-variable.less';
@import '../../../assets/mixins.less';

// 18 / 7 Periods test
.table-legend-container {
  justify-content: center;
  .flex(row);
  .legend-container {
    margin-left: 30px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    .table-legend {
      position: relative; // so children with position absolute are positioned in respect with this element
      .flex(column);
      flex-basis: 90%;
      flex-grow: 0;
      flex-shrink: 0;
      border: 1px solid black;
      .table-legend-pointer {
        transition: all 100ms;
      }
    }
  }
}

.table-container {
  display: grid;
  width: 100%;
  overflow: visible;
  &.spaced {
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: repeat(7, @element-height-spaced) @spacer-spaced repeat(
        2,
        @element-height-spaced
      );
    grid-gap: @grid-gap-spaced;
  }
  &.compact {
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: repeat(7, @element-height-compact) @spacer-compact repeat(
        2,
        @element-height-compact
      );
    grid-gap: @grid-gap-compact;
  }
  &.small {
    grid-template-columns: repeat(18, 1fr);
    // grid-template-rows: repeat(7, @element-height-small) @spacer-small repeat(
    //     2,
    //     @element-height-small
    //   );
    grid-template-rows: 1fr;
    grid-gap: @grid-gap-small;
  }
  &.map {
    grid-template-columns: repeat(18, @element-width-map);
    grid-template-rows: repeat(7, @element-height-map) @spacer-small repeat(2, @element-height-map);
    grid-gap: @grid-gap-map;
  }

  &.elements-hidden {
    .mat-element {
      opacity: 0;
    }
  }

  .first-span {
    grid-column: 2 / span 16;
    grid-row: 1 / span 1;
    .flex(row);
    //TODO(chab) extract as its own component
    .table-switcher {
      width: 50px;
      opacity: 0.5;
      cursor: pointer;
      background: url('../../../assets/images/periodictable.png') center no-repeat;
      background-size: contain;
    }
    .input-container {
    }
  }
  .second-span {
    grid-column: 3 / span 10;
    grid-row: 2 / span 2;
    position: relative;
  }
  .third-span {
    grid-column: 13 / span 6;
    grid-row: 7 / span 1;
  }
  .separator-span {
    grid-column: 1 / span 18;
    grid-row: 8 / span 1;
  }
  .first-lower-span {
    grid-column: 1 / span 2;
    grid-row: 9 / span 2;
  }

  .second-lower-span {
    grid-column: 18 / span 1;
    grid-row: 9 / span 2;
  }
  .item {
    border: 1px solid transparent;
  }

  .element-description {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-end: 2;
    grid-row-start: 4;
    .flex(row);
    .mat-element {
      .flex-container-sized();
      overflow: hidden;
    }
  }
}

.table-transition-wrapper-spaced {
  max-height: (9 * @element-height-spaced) + @spacer-spaced + (9 * @grid-gap-spaced);
}

.table-transition-wrapper-compact {
  max-height: (9 * @element-height-compact) + @spacer-compact + (9 * @grid-gap-compact);
}

.table-transition-wrapper-small {
  // max-height: (9 * @element-height-small) + @spacer-small + (9 * @grid-gap-small);
  max-height: 500px;
}

.mat-element.simple.element-lanthanoid-transitional-metal.disabled .mat-symbol,
.mat-element.simple.element-actinoid-transitional-metal.disabled .mat-symbol {
  font-size: 0.5rem !important;
  white-space: nowrap;
}

.mat-element[data-tooltip]:not(.is-disabled).has-tooltip-bottom::before,
.mat-element[data-tooltip]:not(.is-loading).has-tooltip-bottom::before,
.mat-element[data-tooltip]:not([disabled]).has-tooltip-bottom::before {
  width: auto;
  height: auto;
}

.second-span .pt-spacer {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.second-span .pt-wildcard-button {
  grid-column: 3 / span 2;
  grid-row: 1 / span 2;
  z-index: 1;
}

.second-span button {
  background-color: #fff;
  border-color: #dbdbdb;
  border-width: 1px;
}