@import (reference) "../../css/variables";

body {
  color: @font-color-base;
  font-family: @font-family-base !important;
}

.footer {
  font-family: @font-family-base !important;
}

strong {
  font-family: @font-family-source-sans-pro-semi-bold;
}

h1 {
  font-family: @font-family-base !important;
}

.capitalize {
  text-transform: capitalize;
}

.global-section {
  display: flex;
  flex-direction: column;

  .global-section-row {
    flex: 1;

    &.multi-column {
      display: flex;
      flex-direction: row;

      .subsection-wrapper {
        flex: 1;
      }
    }

    &.no-break-inside {
      break-inside: avoid;
      break-after: auto;
    }

    .subsection-wrapper {
      width: 100%;

      .section-text {
        height: 100%;
      }
    }
  }
}

.report-layout {
  margin: @content-margin-top @content-margin-right @content-margin-bottom @content-margin-left;

  .report-row {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 10px;
    padding: 0 17px;

    &.header, &.logo {
      padding: 0 !important;
    }
  }

  .report-section {
    display: table-cell;

    .section-header {
      padding: 8px 15px;
      margin-top: 5px;
      font-weight: normal;
      background-color: #ebebec;
    }
  }

  .react-grid-layout {
    height: auto !important; // override grid height

    .react-grid-item {
      overflow: visible;
      transition: none;
      z-index: 1;

      .global-section {
        height: 100%;
      }

      &:not(.section-show-overflow) {
        &:not(.section-show-empty-state) {
          &:not(.section-markdown) {
            &:not(.section-image) {
              &:not(.disable-auto-height) {
                height: auto !important;
              }
            }
          }

          &.section-table, &.section-markdown {
            height: auto !important; // override grid item height to fit content
          }

          .section-line-chart, .section-bar-chart {
            .recharts-legend-wrapper {
              max-height: 100% !important;
            }
          }
        }
      }

      transition-property: none;

      .section-chart {
        border: 1px solid #DADBDB;
        padding: 10px 12px 0;
      }

      &.section-image {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      &.section-itemsSection,
      .section-list:first-child,
      .section-number,
      .section-table:first-child,
      .section-markdown,
      .section-duration,
      .section-grouped-list,
      .global-section {
        &:not(.page-break-section) {
          border: 1px solid #DADBDB;
          padding: 10px 12px;
        }
      }

      &.section-itemsSection {
        > div:first-child {
          display: inline-block;
        }
      }

      .section-item-value {
        .section-markdown,
        .section-table {
          border: none !important;
          padding: 0 !important;
          margin-top: 0;
        }
      }

      &.fixed {
        overflow: visible !important;
        position: fixed !important;
        transform: unset !important;
      }

      &.slim {
        height: auto !important;
      }

      &.section-table, &.section-markdown {

        table {
          break-inside: auto;
        }

        tr {
          break-inside: avoid;
          break-after: auto;
        }

        thead {
          display: table-header-group;
          break-inside: avoid;
        }

        tfoot {
          display: table-header-group;
        }
      }

      .section-title {
        font-size: @font-size-h3;
        font-weight: @font-title-weight;
        max-height: 36px;
      }

      &.section-show-overflow {

        .section-column-chart {
          overflow-y: auto;
          overflow-x: hidden;
        }

        .section-line-chart {
          overflow-y: auto;
          overflow-x: hidden;
        }

        .section-bar-chart {
          overflow-y: auto;
          overflow-x: hidden;
        }

        .section-table, .section-markdown, .section-list {
          height: inherit;
          overflow-y: auto;
        }

        @media print {
          .section-table, .section-markdown, .section-list {
            overflow-y: hidden;
          }

          .section-column-chart {
            overflow-y: hidden;
          }

          .section-line-chart {
            .recharts-wrapper {
              overflow-y: hidden;
            }
          }

          .section-bar-chart {
            overflow-y: hidden;
          }
        }
      }
    }
  }

  .error-section {
    border: 1px solid red;
    padding: 5px;
    word-break: break-all;

    .error-message {
      color: fade(red, 80%);
    }
  }
}
