/**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

@use "@material/list";
@use "@material/ripple";
@use "@material/feature-targeting" as feature;
@use '@material/theme/theme';
@use '@material/theme/theme-color';
@use '@material/typography';
@use '@material/rtl';

@include ripple.common();
$query: feature.all();

$feat-color: feature.create-target($query, color);
$feat-structure: feature.create-target($query, structure);
$feat-typography: feature.create-target($query, typography);
$feat-animation: feature.create-target($query, animation);

$item-primary-text-baseline-height: 32px;
$item-secondary-text-baseline-height: 20px;
$dense-item-primary-text-baseline-height: 24px;
$divider-color: if(
  theme-color.tone(theme-color.$background) == 'dark',
  list.$deprecated-divider-color-on-dark-bg,
  list.$deprecated-divider-color-on-light-bg
);

:host {
  display: block;
}

.mdc-deprecated-list {
  @include list.deprecated-base_($query);

  padding: var(--mdc-list-vertical-padding, 8px) 0;
}

@include list.deprecated-single-line-density(
  list.$deprecated-single-line-density-scale,
  $query: $query
);

.mdc-deprecated-list--dense {
  @include feature.targets($feat-structure) {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 0.812rem;
  }
}

.mdc-deprecated-list ::slotted([divider]) {
  @include feature.targets($feat-structure) {
    height: 0;
    margin: 0;
    border: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }

  @include theme.property(border-bottom-color, $divider-color);
}

.mdc-deprecated-list ::slotted([divider][padded]) {
  @include feature.targets($feat-structure) {
    // Leave gaps on each side to match the padding on list items
    margin: 0 var(--mdc-list-side-padding, #{list.$deprecated-side-padding});
  }
}

.mdc-deprecated-list ::slotted([divider][inset]) {
  @include feature.targets($feat-structure) {
    @include rtl.reflexive-box(
      margin,
      left,
      var(--mdc-list-inset-margin, #{list.$deprecated-text-offset}),
    );

    width: calc(
      100% - var(--mdc-list-inset-margin, #{list.$deprecated-text-offset})
    );
  }
}

.mdc-deprecated-list ::slotted([divider][inset][padded]) {
  @include feature.targets($feat-structure) {
    width: calc(
      100% - var(--mdc-list-inset-margin, #{list.$deprecated-text-offset}) -
        var(--mdc-list-side-padding, #{list.$deprecated-side-padding})
    );
  }
}

// stylelint-disable plugin/selector-bem-pattern
.mdc-deprecated-list--dense ::slotted([mwc-list-item]) {
  @include feature.targets($feat-structure) {
    height: 40px;
  }
}

.mdc-deprecated-list--dense ::slotted([mwc-list]) {
  @include feature.targets($feat-structure) {
    --mdc-list-item-graphic-size: 20px;
  }
}

.mdc-deprecated-list--two-line.mdc-deprecated-list--dense ::slotted([mwc-list-item]),
.mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense ::slotted([mwc-list-item]) {
  @include feature.targets($feat-structure) {
    height: 60px;
  }
}

.mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense ::slotted([mwc-list]) {
  @include feature.targets($feat-structure) {
    --mdc-list-item-graphic-size: 36px;
  }
}

:host([noninteractive]) {
  pointer-events: none;
  cursor: default;
}

.mdc-deprecated-list--dense ::slotted(.mdc-deprecated-list-item__primary-text) {
  @include typography.text-baseline(
    $top: $dense-item-primary-text-baseline-height,
    $bottom: $item-secondary-text-baseline-height,
    $query: $query
  );
}