// https://stackoverflow.com/a/28592238
.layered-background(@a, @b: var(--dcg-item-background-color)) {
  background: linear-gradient(@a), linear-gradient(@b);
}

.compact-view-enabled.compact-view-enabled.compact-view-enabled.compact-view-enabled.compact-view-enabled.compact-view-enabled.compact-view-no-separating-lines.compact-view-highlight-alternating-lines
  .dcg-expressionfolder:nth-child(2n of .dcg-expressionfolder) {
  .layered-background(rgb(50 49 185 / 0.2));
}

.lerp2(@a, @b) {
  @r: calc((@a) + ((@b) - (@a)) * var(--dsm-compact-mode-multiplier));
}

// force an increase in specificity
.compact-view-enabled.compact-view-enabled.compact-view-enabled.compact-view-enabled.compact-view-enabled {
  .dcg-smart-textarea-container {
    font-size: var(--text-font-size);
  }
  .dcg-mq-bracket-container {
    font-size: calc(
      max(var(--bracket-font-size-factor), var(--minimum-font-size))
    );
  }
  .dcg-main,
  .dcg-ticker .dcg-ticker-settings-internal {
    font-size: calc(1.1 * (16 / 18) * var(--math-font-size));
  }
  .dcg-evaluation-container {
    font-size: calc((16 / 18) * var(--math-font-size));
  }

  &.compact-view-no-separating-lines {
    .dcg-expressionitem:not(.dcg-selected) {
      border: none;
    }
    &.compact-view-highlight-alternating-lines
      .dcg-expressionitem:not(.dcg-expressionfolder):nth-child(2n) {
      .layered-background(rgb(190 190 190 / 0.15));
    }
    .dcg-expressionfolder {
      .layered-background(rgb(145 144 220 / 0.2));
    }
  }

  &.compact-view-hide-evaluations-enabled {
    // evaluation box
    .dcg-evaluation-container {
      // color swatch in evaluation box
      .dcg-color-swatch {
        width: 1.8em;
        height: 1.8em;
      }

      margin-right: -10px;
      padding-right: .lerp2(35px, 13px) [];
      .dcg-typeset-math {
        padding: 0;
      }
      position: absolute;
      right: 0;
      z-index: 2;
      overflow: hidden;
      margin-top: -5px;
      transform: translate(0%, -85%);
      .dcg-evaluation {
        background-color: #f5f5f5;
        transition:
          transform 0.125s,
          max-width 0.125s;
        transition-delay: overflow 0.25s;
        overflow: hidden;
        font-size: 0.8em;
        scrollbar-width: 2px;
        scrollbar-track-color: black;
      }

      .dcg-evaluation::-webkit-scrollbar {
        height: 2px;
      }
      .dcg-evaluation::-webkit-scrollbar-thumb {
        height: 2px;
        background-color: black;
      }
    }

    // animation is used to delay overflow activation
    .dcg-evaluation:hover,
    .dcg-evaluation:focus {
      animation: activate-overflow 0.5s;
      animation-fill-mode: both;
      max-width: 100% !important;
    }

    @keyframes activate-overflow {
      to {
        overflow: auto;
      }
    }

    // decrease remove icon hitbox so that evaluations can be easily hovered
    .dcg-icon-remove {
      padding-bottom: 0;
      padding-left: 0;
    }
  }

  &.compact-view-remove-spacing-enabled {
    // make cursor/caret more obvious since it'll be smaller
    .dcg-mq-cursor {
      border: 1.5px solid var(--dcg-custom-text-color, black);
      margin: 0 -1.5px;
    }

    .dcg-container .dcg-mq-editable-field:not(.dcg-no-fadeout):after {
      background: none;
    }
    .dcg-main,
    .dcg-evaluation-container {
      padding-top: .lerp2(15px, 0px) [];
      padding-left: .lerp2(53px, 35px) [];
      padding-bottom: .lerp2(9px, 0px) [];
      padding-right: .lerp2(35px, 25px) [];
      margin-left: 4px;
    }

    // expressions in general
    .dcg-inFolder .dcg-main {
      margin-left: .lerp2(20px, 30px) [];
    }
    .dcg-caret-container {
      transform: scale(.lerp2(1, 0.8) []);
      padding-left: .lerp2(10px, 0px) [];
      padding-top: .lerp2(18px, 4px) [];
    }
    .dcg-fade-container {
      padding-bottom: .lerp2(6px, 0px) [];
    }
    &:not(.compact-view-no-separating-lines) {
      .dcg-expressionitem:not(.dcg-selected) {
        border-top-color: #777777;
      }
    }
    .dcg-expressionitem:is(
        .dcg-expressionfolder:not(.dcg-collapsed).dcg-has-items,
        .dcg-inFolder
      )
      .dcg-fade-container:after {
      border-left-color: rgb(from var(--dcg-item-text-color) r g b / 0.67);
    }

    // fix authorfeatures toggle problem
    .dcg-component-checkbox.dcg-action-toggle-secret-folder.dcg-do-not-blur {
      margin-bottom: .lerp2(-5px, 0px) [];
    }

    // icons to the left of the expressions bar
    .dcg-expression-icon-container {
      right: .lerp2(0%, -10%) [];
      left: unset;
      top: 50%;
      transform: scale(.lerp2(1, 0.5) []);
      .dcg-tooltip-hit-area-container {
        transform: scale(.lerp2(1, 1.3) []);
      }
    }
    .dcg-icon-text {
      right: 10%;
      left: unset;
    }

    // "x" icon to the right of the expressions
    .dcg-icon-remove {
      padding: 0;
      opacity: 0.5;
      margin-top: 3px;
      margin-right: 3px;
      &::before {
        font-size: var(--math-font-size) !important;
        vertical-align: top;
      }
    }
    .dcg-top-level-icon:hover .dcg-icon-remove {
      opacity: 1;
    }

    // slider
    .dcg-slider-container {
      min-height: 0;
    }
    .dcg-track .dcg-graphic {
      height: 2px;
      background-color: rgba(128, 128, 128, 0.8);
    }
    .dcg-thumb .dcg-graphic {
      width: 0;
      height: 0;
    }
    .dcg-thumb .dcg-center {
      transform: translateY(-2px) scale(0.4);
    }
    .dcg-thumb:hover .dcg-center {
      transform: translateY(-2px) scale(0.8);
    }

    // evaluation box
    .dcg-evaluation-container {
      .dcg-typeset-math {
        padding: 0;
      }
      margin-top: -5px;
    }

    // tables
    .dcg-cell {
      padding: 0px;
    }
    .dcg-table-icon-container {
      transform: scale(0.5);
      margin-left: -10px;
      z-index: 2;
    }

    // settings
    .dcg-expression-edit-actions .dcg-exp-action-button {
      padding: .lerp2(12px, 0px) [] .lerp2(10px, 0px) [];
      width: .lerp2(44px, 14px) [];
      height: .lerp2(44px, 14px) [];
      transform: scale(.lerp2(1, 0.7) []) translateY(.lerp2(0px, -5px) []);
    }
  }
}

.compact-view-enabled.hide-folder-toggles {
  .dcg-action-toggle-secret-folder:not(.dcg-checked),
  .dcg-action-toggle-in-front-of-everything:not(.dcg-checked) {
    display: none;
  }
}
