// Copyright 2016 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import "@material/ripple/common";
@import "@material/ripple/mixins";
@import "@material/rtl/mixins";
@import "@material/theme/functions";
@import "@material/typography/mixins";
@import "@material/typography/variables";
@import "./mixins";
@import "./variables";

// postcss-bem-linter: define list

.mdc-list {
  @include mdc-typography(subtitle1);
  @include mdc-list-item-primary-text-ink-color(text-primary-on-background);

  margin: 0;
  padding: 8px 0;

  // According to the mocks and stickersheet, the line-height is adjusted to 24px for text content,
  // same as for body1.

  /* @alternate */
  line-height: map-get(map-get($mdc-typography-styles, body1), line-height);
  list-style-type: none;
}

@at-root {
  @include mdc-list-item-secondary-text-ink-color(text-secondary-on-background);
  @include mdc-list-item-graphic-fill-color(transparent);
  @include mdc-list-item-graphic-ink-color(text-icon-on-background);
  @include mdc-list-item-meta-ink-color(text-hint-on-background);
}

.mdc-list--dense {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: .812rem;
}

// postcss-bem-linter: end

// postcss-bem-linter: define list-item

.mdc-list-item {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  height: 48px;
  padding: 0 $mdc-list-side-padding;
  overflow: hidden;

  &:focus {
    outline: none;
  }
}

// "Selected" is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.
// "Activated" is more permanent. E.g., the currently highlighted navigation destination in a drawer.
.mdc-list-item--selected,
.mdc-list-item--activated {
  @include mdc-list-item-primary-text-ink-color(primary);
  @include mdc-list-item-graphic-ink-color(primary);
}

.mdc-list-item__graphic {
  @include mdc-list-graphic-size_(24px);

  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.mdc-list-item__meta {
  @include mdc-rtl-reflexive-property(margin, auto, 0, ".mdc-list-item");
}

.mdc-list-item__text,
.mdc-list-item__secondary-text {
  @include mdc-typography-overflow-ellipsis;

  display: block;
}

.mdc-list-item__secondary-text {
  @include mdc-typography(body2);
}

// Match the font size to the primary text when dense
// stylelint-disable plugin/selector-bem-pattern
.mdc-list--dense .mdc-list-item__secondary-text {
  font-size: inherit;
}
// stylelint-enable plugin/selector-bem-pattern

// stylelint-disable plugin/selector-bem-pattern
.mdc-list--dense .mdc-list-item {
  height: 40px;
}

.mdc-list--dense .mdc-list-item__graphic {
  @include mdc-list-graphic-size_(20px);
}

.mdc-list--avatar-list .mdc-list-item {
  height: 56px;
}

.mdc-list--avatar-list .mdc-list-item__graphic {
  @include mdc-list-graphic-size_(40px);

  border-radius: 50%;
}

// List items should support states by default, but it should be possible to opt out.
// Direct child combinator is necessary for non-interactive modifier on parent to not match this selector.
:not(.mdc-list--non-interactive) > .mdc-list-item {
  @include mdc-ripple-surface;
  @include mdc-ripple-radius-bounded;
  @include mdc-states;
  @include mdc-states-activated(primary);
  @include mdc-states-selected(primary);
}

.mdc-list--two-line .mdc-list-item {
  height: 72px;
}

.mdc-list--two-line.mdc-list--dense .mdc-list-item {
  height: 60px;
}

.mdc-list--avatar-list.mdc-list--dense .mdc-list-item {
  height: 48px;
}

.mdc-list--avatar-list.mdc-list--dense .mdc-list-item__graphic {
  @include mdc-list-graphic-size_(36px);
}
// postcss-bem-linter: end

// Override anchor tag styles for the use-case of a list being used for navigation
// stylelint-disable selector-max-type,selector-no-qualifying-type
a.mdc-list-item {
  color: inherit;
  text-decoration: none;
}
// stylelint-enable selector-max-type,selector-no-qualifying-type

// postcss-bem-linter: define list-divider

.mdc-list-divider {
  height: 0;
  margin: 0;
  border: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

@at-root {
  $divider-color: if(
    mdc-theme-tone($mdc-theme-background) == "dark",
    $mdc-list-divider-color-on-dark-bg,
    $mdc-list-divider-color-on-light-bg
  );

  @include mdc-list-divider-color($divider-color);
}

.mdc-list-divider--padded {
  // Leave gaps on each side to match the padding on list items
  margin: 0 $mdc-list-side-padding;
}

.mdc-list-divider--inset {
  @include mdc-rtl-reflexive-box(margin, left, $mdc-list-text-offset, ".mdc-list-group");

  width: calc(100% - #{$mdc-list-text-offset});
}

.mdc-list-divider--inset.mdc-list-divider--padded {
  width: calc(100% - #{$mdc-list-text-offset} - #{$mdc-list-side-padding});
}

// postcss-bem-linter: end

// postcss-bem-linter: define list-group

.mdc-list-group {
  // Cancel top/bottom padding on individual lists within group
  .mdc-list {
    padding: 0;
  }
}

.mdc-list-group__subheader {
  $mdc-list-subheader-virtual-height: 3rem;
  $mdc-list-subheader-leading: map-get(map-get($mdc-typography-styles, body1), line-height);
  $mdc-list-subheader-margin:
    ($mdc-list-subheader-virtual-height - $mdc-list-subheader-leading) / 2;

  @include mdc-typography(subtitle1);

  margin: $mdc-list-subheader-margin $mdc-list-side-padding;
}

@at-root {
  @include mdc-list-group-subheader-ink-color(text-primary-on-background);
}

// postcss-bem-linter: end