.pf-c-log-viewer {
  --pf-c-log-viewer--Height: 100%;
  --pf-c-log-viewer--MaxHeight: auto;
  --pf-c-log-viewer--m-line-numbers__index--Display: inline;

  // Header
  --pf-c-log-viewer__header--MarginBottom: var(--pf-global--spacer--sm);

  // Main
  --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-log-viewer__main--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);

  // Scroll container
  --pf-c-log-viewer__scroll-container--Height: #{pf-size-prem(600px)};
  --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--sm);

  // Main ::after
  --pf-c-log-viewer--m-line-numbers__main--before--Top: 0;
  --pf-c-log-viewer--m-line-numbers__main--before--Bottom: 0;
  --pf-c-log-viewer--m-line-numbers__main--before--Width: var(--pf-global--BorderWidth--sm);
  --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);

  // List
  --pf-c-log-viewer__list--Height: auto;
  --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);

  // Index
  --pf-c-log-viewer__index--Display: none;
  --pf-c-log-viewer__index--Width: #{pf-size-prem(65px)}; // default width
  --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
  --pf-c-log-viewer__index--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
  --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
  --pf-c-log-viewer__index--BackgroundColor: transparent;

  // Text
  --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
  --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
  --pf-c-log-viewer__text--WordBreak: break-all;
  --pf-c-log-viewer__text--WhiteSpace: break-spaces;
  --pf-c-log-viewer__text--LineBreak: anywhere;
  --pf-c-log-viewer--m-nowrap__text--WhiteSpace: nowrap;
  --pf-c-log-viewer__string--m-match--Color: var(--pf-global--palette--gold-700);
  --pf-c-log-viewer__string--m-match--BackgroundColor: var(--pf-global--palette--gold-100);
  --pf-c-log-viewer__string--m-current--Color: var(--pf-global--palette--gold-700);
  --pf-c-log-viewer__string--m-current--BackgroundColor: var(--pf-global--palette--gold-400);

  // Timestamp
  --pf-c-log-viewer__timestamp--FontWeight: var(--pf-global--FontWeight--bold);

  // Toolbar
  --pf-c-log-viewer--c-toolbar--PaddingTop: 0;
  --pf-c-log-viewer--c-toolbar--PaddingBottom: 0;
  --pf-c-log-viewer--c-toolbar__content--PaddingRight: 0;
  --pf-c-log-viewer--c-toolbar__content--PaddingLeft: 0;
  --pf-c-log-viewer--c-toolbar__group--m-toggle-group--spacer: 0;
  --pf-c-log-viewer--c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-global--spacer--sm);

  // Dark theme
  --pf-c-log-viewer--m-dark__main--BorderWidth: 0;

  &.pf-m-dark {
    --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);

    .pf-c-log-viewer__main {
      @include pf-t-dark;

      --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
      --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
      --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
      --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
      --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
    }
  }

  display: flex;
  flex-direction: column;
  height: var(--pf-c-log-viewer--Height);
  max-height: var(--pf-c-log-viewer--MaxHeight);

  &.pf-m-wrap-text {
    word-break: break-all;
  }

  &.pf-m-nowrap {
    --pf-c-log-viewer__text--WhiteSpace: var(--pf-c-log-viewer--m-nowrap__text--WhiteSpace);
  }

  &.pf-m-line-numbers {
    --pf-c-log-viewer__index--Display: var(--pf-c-log-viewer--m-line-numbers__index--Display);

    .pf-c-log-viewer__list {
      position: absolute;
      right: 0;
      left: var(--pf-c-log-viewer--m-line-numbers__list--Left);

      // Divider
      &::before {
        position: absolute;
        top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top); // rename these vars at a breaking change
        bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
        left: 0;
        width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
        content: "";
        background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
      }
    }
  }

  // Nested toolbar
  .pf-c-toolbar {
    --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
    --pf-c-toolbar--PaddingBottom: var(--pf-c-log-viewer--c-toolbar--PaddingBottom);
    --pf-c-toolbar__content--PaddingRight: var(--pf-c-log-viewer--c-toolbar__content--PaddingRight);
    --pf-c-toolbar__content--PaddingLeft: var(--pf-c-log-viewer--c-toolbar__content--PaddingLeft);
    --pf-c-toolbar__group--m-toggle-group--spacer: 0;
    --pf-c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-c-log-viewer--c-toolbar__group--m-toggle-group--m-show--spacer);
  }

  .pf-c-toolbar__content-section {
    flex-wrap: nowrap;
  }

  .pf-c-search-input {
    width: 100%;
  }
}

// Header
.pf-c-log-viewer__header {
  margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
}

// Main
.pf-c-log-viewer__main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: var(--pf-c-log-viewer__main--BackgroundColor);
  border: var(--pf-c-log-viewer__main--BorderWidth) solid var(--pf-c-log-viewer__main--BorderColor);
}

.pf-c-log-viewer__scroll-container {
  position: relative;
  height: var(--pf-c-log-viewer__scroll-container--Height);
  padding-top: var(--pf-c-log-viewer__scroll-container--PaddingTop);
  padding-bottom: var(--pf-c-log-viewer__scroll-container--PaddingBottom);
  overflow: auto;
  will-change: transform;
  direction: ltr;
}

// List
.pf-c-log-viewer__list {
  position: relative;
  height: var(--pf-c-log-viewer__list--Height);
}

.pf-c-log-viewer__list-item {
  left: 0;
  width: 100%;
}

.pf-c-log-viewer__string {
  &.pf-m-match {
    color: var(--pf-c-log-viewer__string--m-match--Color, inherit);
    background-color: var(--pf-c-log-viewer__string--m-match--BackgroundColor);
  }

  &.pf-m-current {
    color: var(--pf-c-log-viewer__string--m-current--Color, inherit);
    background-color: var(--pf-c-log-viewer__string--m-current--BackgroundColor);
  }
}

// Index
.pf-c-log-viewer__index {
  position: fixed;
  left: 0;
  display: var(--pf-c-log-viewer__index--Display);
  width: var(--pf-c-log-viewer__index--Width);
  padding-right: var(--pf-c-log-viewer__index--PaddingRight);
  padding-left: var(--pf-c-log-viewer__index--PaddingLeft);
  font-family: var(--pf-c-log-viewer__index--FontFamily);
  font-size: var(--pf-c-log-viewer__index--FontSize);
  color: var(--pf-c-log-viewer__index--Color);
  user-select: none;
  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
}

// Text
.pf-c-log-viewer__text {
  display: block;
  padding-right: var(--pf-c-log-viewer__text--PaddingRight);
  padding-left: var(--pf-c-log-viewer__text--PaddingLeft);
  font-family: var(--pf-c-log-viewer__text--FontFamily);
  font-size: var(--pf-c-log-viewer__text--FontSize);
  color: var(--pf-c-log-viewer__text--Color);
  word-break: var(--pf-c-log-viewer__text--WordBreak);
  white-space: var(--pf-c-log-viewer__text--WhiteSpace);
  line-break: var(--pf-c-log-viewer__text--LineBreak);
}

// Timestamp
.pf-c-log-viewer__timestamp {
  font-weight: var(--pf-c-log-viewer__timestamp--FontWeight);
}