// Copyright 2016 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions://
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.//
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

@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--disabled {
  @include mdc-list-item-primary-text-ink-color(text-disabled-on-background);
}

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

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

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

.mdc-list-item__text {
  @include mdc-typography-overflow-ellipsis;
}

$mdc-list-item-primary-text-baseline-height_: 32px;
$mdc-list-item-secondary-text-baseline-height_: 20px;
$mdc-list-dense-item-primary-text-baseline-height_: 24px;

.mdc-list-item__primary-text {
  @include mdc-typography-overflow-ellipsis;
  @include mdc-typography-baseline-top($mdc-list-item-primary-text-baseline-height_);
  @include mdc-typography-baseline-bottom($mdc-list-item-secondary-text-baseline-height_);

  display: block;

  // stylelint-disable plugin/selector-bem-pattern
  .mdc-list--dense & {
    @include mdc-typography-baseline-top($mdc-list-dense-item-primary-text-baseline-height_);
    @include mdc-typography-baseline-bottom($mdc-list-item-secondary-text-baseline-height_);
  }
  // stylelint-enable plugin/selector-bem-pattern
}

.mdc-list-item__secondary-text {
  @include mdc-typography(body2);
  @include mdc-typography-overflow-ellipsis;
  @include mdc-typography-baseline-top($mdc-list-item-secondary-text-baseline-height_);

  display: block;

  // stylelint-disable plugin/selector-bem-pattern
  .mdc-list--dense & {
    @include mdc-typography-baseline-top($mdc-list-item-secondary-text-baseline-height_);

    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%;
}

.mdc-list--two-line .mdc-list-item__text {
  align-self: flex-start;
}

.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: 60px;
}

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

// 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) > :not(.mdc-list-item--disabled).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);
}
// 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