@use "@material/button/_index" as button;
@use "@material/checkbox/_index" as checkbox;
@use "@material/chips/_index" as chips;
@use "@material/data-table/_index" as data-table;
@use "@material/icon-button/_index" as icon-button;
@use "@material/list/_index" as list;
@use "@material/radio/_index" as radio;
@use "@material/switch/_index" as switch;
@use "@material/tab-bar/_index" as tab-bar;
@use "@material/textfield/_index" as textfield;
@use "@material/top-app-bar/_index" as top-app-bar;

@use "@material/density/_index" as density;
@use "@material/rtl/_index" as rtl;
@use "@material/shape/_index" as shape;

@mixin density($density: 0) {
  $diff: density.$interval * $density;
  .mdc-button {
    @include button.density($density);
  }
  .mdc-checkbox {
    @include checkbox.density($density);
  }
  .mdc-chip {
    @include chips.density($density);
    @include chips.shape-radius(50%, false, $density);
  }
  .mdc-data-table {
    @include data-table.density($density);
    &.rounded {
      border-radius: shape.resolve-percentage-radius(56px + $diff, small)
        shape.resolve-percentage-radius(56px + $diff, small)
        shape.resolve-percentage-radius(52px + $diff, small)
        shape.resolve-percentage-radius(52px + $diff, small);
    }
  }
  .mdc-icon-button {
    @include icon-button.density($density);
  }
  .mdc-list {
    &-item__meta {
      &.mdc-icon-button {
        @include rtl.reflexive-property(margin, auto, -12px - $diff / 2);
      }
    }
    &:not(.mdc-list--two-line) {
      @include list.single-line-density($density);
    }
    &.mdc-list--two-line {
      .mdc-list-item {
        height: density.prop-value(
          (
            height: (
              default: 72px,
              maximum: 72px,
              minimum: 60px,
            ),
          ),
          $density,
          height
        );
        &__primary-text::before {
          height: 32px + $diff / 2;
        }
      }
    }
    &--two-line.three-line .mdc-list-item,
    .three-line.mdc-list-item {
      height: density.prop-value(
        (
          height: (
            default: 88px,
            maximum: 88px,
            minimum: 72px,
          ),
        ),
        $density,
        height
      );
    }
  }
  .mdc-radio {
    @include radio.density($density);
    &.mdc-list-item__meta {
      @include rtl.reflexive-property(margin, auto, 0);
    }
  }
  .mdc-switch {
    @include switch.density($density);
  }
  .mdc-tab-bar {
    @include tab-bar.density($density);
  }
  .mdc-text-field {
    &:not(.search-bar__field):not(.mdc-text-field--textarea) {
      &:not(.mdc-text-field--outlined) {
        @include textfield.density($density);
      }
      &.mdc-text-field--outlined {
        @include textfield.outlined-density($density);
        &.mdc-text-field--with-leading-icon {
          @include textfield.outlined-with-leading-icon-density($density);
        }
      }
    }
    &.mdc-text-field--textarea {
      .mdc-text-field__input {
        min-height: 56px - 8px + $diff;
      }
    }
  }
  .mdc-card {
    .text-row .text-container {
      .overline {
        margin-bottom: 4px + $diff;
      }
      .title {
        padding-bottom: 8px + $diff;
      }
    }
  }
  .content-container .mdc-drawer.mdc-drawer--dismissible {
    height: calc(100% - #{top-app-bar.$row-height + $diff});
  }
  .mdc-drawer {
    &__header {
      .mdc-icon-button:last-child {
        @include rtl.reflexive-box(margin, right, -12px - $diff / 2);
      }
    }
    &.nav {
      .mdc-drawer__header {
        min-height: 0;
        height: top-app-bar.$row-height + $diff;
      }
      .mdc-drawer__title {
        &::before {
          height: 36px + $diff / 2;
        }
        &::after {
          height: 20px + $diff / 2;
          vertical-align: -20px - $diff / 2;
        }
      }
      .mdc-list-item {
        height: density.prop-value(
          (
            height: (
              default: 56px,
              maximum: 56px,
              minimum: 44px,
            ),
          ),
          $density,
          height
        );
      }
    }
    &.details-drawer {
      .mdc-drawer__content {
        .details-image {
          margin-bottom: (8px + $diff / 2);
        }
        .details-text {
          padding-bottom: 16px + $diff;
          .mdc-typography--headline4,
          .mdc-typography--body2,
          .mdc-typography--caption {
            margin: (8px + $diff / 2) 0;
          }
        }
        .details-button {
          padding-bottom: 16px + $diff;
        }
        .details-list {
          .subheader {
            padding-bottom: 16px + $diff;
          }
        }
      }
      .search-chips-container {
        height: 48px + $diff;
      }
    }
    &.filter-drawer {
      .preset {
        &-group {
          padding: 16px + $diff 16px;
        }
        &-buttons {
          margin: 16px + $diff 0;
          &:last-child {
            margin: 0;
          }
        }
      }
      .top-buttons {
        padding: 16px + $diff 16px;
      }
      .mdc-drawer__content .group {
        &-collapsible .rmwc-collapsible-list__children-inner {
          padding: 16px + $diff 16px;
        }
        .filter-segmented-button-container,
        .filter-button-container {
          margin-bottom: 16px + $diff;
        }
      }
      div.subheader {
        padding-bottom: 16px + $diff;
      }
    }
    &.drawer-right.entry-drawer {
      .form .vendor-container .title-container .drag-handle {
        padding: 12px + $diff / 2;
      }
      .drawer-footer {
        height: 64px + $diff;
      }
    }
    .group-collapsible .rmwc-collapsible-list__handle .mdc-list-item {
      height: density.prop-value(
        (
          height: (
            default: 40px,
            maximum: 40px,
            minimum: 32px,
          ),
        ),
        $density,
        height
      );
    }
  }
  .mdc-fab--extended {
    height: 48px + $diff;
    @include shape.radius(0.5 * (48px + $diff));
  }
  .mdc-select {
    &__anchor {
      height: 56px + $diff;
    }
    &__dropdown-icon,
    &--with-leading-icon .mdc-select__icon {
      bottom: 16px + $diff / 2;
    }
    &__selected-text {
      height: 56px + $diff;
    }
    &--outlined {
      .mdc-select__selected-text {
        padding-top: 14px + $diff / 2;
        padding-bottom: 12px + $diff / 2;
      }
    }
  }
  .mdc-top-app-bar {
    &__row {
      height: top-app-bar.$row-height + $diff;
      &.tab-row {
        height: 48px + $diff;
      }
    }
    &--fixed-adjust {
      padding-top: top-app-bar.$row-height + $diff;
    }
    .mdc-linear-progress {
      top: top-app-bar.$row-height + $diff - 4px;
    }
    &.search-open {
      & ~ .content-container .main.extended-app-bar::before {
        height: 0;
      }
    }
  }
  .main.extended-app-bar::before {
    height: 256px - (top-app-bar.$row-height + $diff);
  }

  .drawer-open .main.extended-app-bar::before,
  .drawer-open.main.extended-app-bar::before {
    height: 0;
  }
  .statistics,
  .history {
    .mdc-top-app-bar--fixed-adjust {
      padding-top: top-app-bar.$row-height + 48px + $diff * 2;
    }
    .main.extended-app-bar::before {
      height: 256px - (top-app-bar.$row-height + 48px + $diff * 2);
    }
  }
  .guides-container {
    min-height: calc(100vh - #{top-app-bar.$row-height + $diff});
  }
  .entries-drawer.mdc-drawer {
    height: calc(100vh - #{top-app-bar.$row-height + $diff});
    top: top-app-bar.$row-height + $diff;
    &,
    .entries-list-container {
      .filter-chips-container {
        height: 48px + $diff;
      }
    }
  }
  .autocomplete-mobile,
  .bottom-nav .search-app-bar .autocomplete-mobile {
    top: top-app-bar.$row-height + $diff;
    &--open {
      min-height: calc(100vh - #{top-app-bar.$row-height + $diff});
      max-height: calc(100vh - #{top-app-bar.$row-height + $diff});
    }
  }
  .stats-tab .mdc-card {
    &.pie-card,
    &.table-card,
    &.timeline-card {
      .title-container {
        .mdc-typography--headline5 {
          margin-bottom: 8px + $diff;
        }
        .mdc-typography--subtitle2 {
          margin-bottom: 16px + $diff;
        }
      }
    }
  }
  .search-bar {
    &--persistent {
      height: density.prop-value(
        (
          height: (
            default: 40px,
            maximum: 40px,
            minimum: 28px,
          ),
        ),
        $density,
        height
      );
      .search-bar__field.mdc-text-field {
        @include shape.radius(
          shape.resolve-percentage-radius(
            density.prop-value(
              (
                height: (
                  default: 40px,
                  maximum: 40px,
                  minimum: 28px,
                ),
              ),
              $density,
              height
            ),
            small
          )
        );
        .mdc-icon-button {
          $size: density.prop-value(
            (
              height: (
                default: 36px,
                maximum: 36px,
                minimum: 24px,
              ),
            ),
            $density,
            height
          );
          height: $size;
          width: $size;
          padding: (
              density.prop-value(
                  (
                    height: (
                      default: 40px,
                      maximum: 40px,
                      minimum: 28px,
                    ),
                  ),
                  $density,
                  height
                ) - 24px - 4px
            ) / 2;
        }
      }
    }
  }
  .mdc-data-table__cell .rmwc-circular-progress {
    padding: 12px + $diff;
  }
  .markdown {
    &-editor {
      .markdown-editor {
        &__textarea {
          min-height: 56px - 8px + $diff;
        }
      }
    }
  }
  .settings-container .settings-group .mdc-card {
    .switch-container {
      height: 48px + $diff;
    }
    &.theme-card .theme-form-field.has-help-text .mdc-typography--body2 {
      height: 56px + $diff;
    }
    .theme-list.mdc-list {
      @include shape.radius(
        shape.resolve-percentage-radius(
          density.prop-value(
            $density-config: list.$single-line-density-config,
            $density-scale: $density,
            $property-name: height
          ),
          small
        )
      );
    }
  }
  .footer {
    .mdc-typography--body2 {
      margin-bottom: 16px + $diff;
    }
  }
  @media (max-width: top-app-bar.$mobile-breakpoint) {
    .mdc-drawer.nav .mdc-drawer__header {
      height: top-app-bar.$mobile-row-height + $diff;
    }
    .mdc-top-app-bar {
      &__row {
        height: top-app-bar.$mobile-row-height + $diff;
      }
      &--fixed-adjust {
        padding-top: top-app-bar.$mobile-row-height + $diff;
      }
      &.search-open {
        & ~ .content-container .main.extended-app-bar::before {
          height: 0;
        }
      }
    }
    .main.extended-app-bar::before {
      height: 256px - (top-app-bar.$mobile-row-height + $diff);
    }
    .drawer-open .main.extended-app-bar::before,
    .drawer-open.main.extended-app-bar::before {
      height: 0;
    }
    .statistics,
    .history {
      .mdc-top-app-bar--fixed-adjust {
        padding-top: top-app-bar.$mobile-row-height + 48px + $diff * 2;
      }
      .main.extended-app-bar::before {
        height: 256px - (top-app-bar.$mobile-row-height + 48px + $diff * 2);
      }
    }
    .guides-container {
      min-height: calc(100vh - #{top-app-bar.$mobile-row-height + $diff});
    }
    .entries-drawer.mdc-drawer {
      height: calc(100vh - #{top-app-bar.$mobile-row-height + $diff});
      top: top-app-bar.$mobile-row-height + $diff;
    }
    .autocomplete-mobile,
    .bottom-nav .search-app-bar .autocomplete-mobile {
      top: top-app-bar.$mobile-row-height + $diff;
      &--open {
        min-height: calc(100vh - #{top-app-bar.$mobile-row-height + $diff});
        max-height: calc(100vh - #{top-app-bar.$mobile-row-height + $diff});
      }
    }
  }
}

.density-comfortable {
  @include density(-1);
}

.density-compact {
  @include density(-2);
}
