// 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/mixins";
@import "@material/rtl/mixins";
@import "@material/theme/mixins";
@import "@material/typography/mixins";
@import "@material/typography/variables";

$mdc-list-side-padding: 16px;

// Sets the width and height of a detail element to the specified dimension.
@mixin mdc-list-detail-size_($size) {
  width: $size;
  height: $size;
}

// Sets the width and height of the start detail element, as well as calculates the margins for
// the start detail element such that the text is always offset by 72px, which is defined within
// the spec.
@mixin mdc-list-start-detail-size_($size) {
  $text-offset: 72px;
  $side-padding: $mdc-list-side-padding;
  $margin-value: $text-offset - $side-padding - $size;

  @include mdc-list-detail-size_($size);
  @include mdc-rtl-reflexive-box(margin, right, $margin-value, ".mdc-list-item");
}

// postcss-bem-linter: define list

.mdc-list {
  @include mdc-typography(subheading2);
  @include mdc-theme-prop(color, text-primary-on-background);

  @include mdc-theme-dark {
    @include mdc-theme-prop(color, text-primary-on-dark);
  }

  margin: 0;
  padding: 8px $mdc-list-side-padding 0;

  // According to the mocks and stickersheet, the line-height is adjusted to 24px for text content,
  // same as for subheading1.
  line-height: map-get(map-get($mdc-typography-styles, subheading1), line-height);
  list-style-type: none;
}

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

// postcss-bem-linter: end

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

.mdc-list-item {
  @include mdc-typography-overflow-ellipsis;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 48px;

  &__start-detail {
    @include mdc-list-start-detail-size_(24px);
  }

  &__end-detail {
    @include mdc-list-detail-size_(24px);
    @include mdc-rtl-reflexive-property(margin, auto, 0, ".mdc-list-item");
  }

  &__text {
    display: inline-flex;
    flex-direction: column;

    &__secondary {
      @include mdc-typography(body1);
      @include mdc-theme-prop(color, text-secondary-on-background);

      @include mdc-theme-dark {
        @include mdc-theme-prop(color, text-secondary-on-dark);
      }

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

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

    &__start-detail {
      @include mdc-list-start-detail-size_(20px);
    }

    &__end-detail {
      @include mdc-list-detail-size_(20px);
    }
  }

  .mdc-list--avatar-list & {
    height: 56px;

    &__start-detail {
      @include mdc-list-start-detail-size_(40px);

      border-radius: 50%;
    }
  }

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

    &__start-detail {
      @include mdc-list-start-detail-size_(36px);
    }
  }

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

  .mdc-list--two-line.mdc-list--dense & {
    height: 60px;
  }
}
// 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

.mdc-list-item.mdc-ripple-upgraded {
  @include mdc-ripple-base;
  @include mdc-ripple-bg((pseudo: "::before"));
  @include mdc-ripple-fg((pseudo: "::after"));
  @include mdc-rtl-reflexive-position(left, $mdc-list-side-padding * -1);

  position: relative;
  // Cause the upgraded list item to cover the entirety of the list, causing ripples to emanate
  // across the entire list element.
  width: 100%;
  padding: 0 $mdc-list-side-padding;
  overflow: hidden;

  &:focus {
    outline: none;
  }

  @include mdc-theme-dark(".mdc-list") {
    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .12));
    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .12));
  }
}

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

.mdc-list-divider {
  height: 0;
  margin: 0;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, .12);

  @include mdc-theme-dark(".mdc-list") {
    border-bottom-color: rgba(255, 255, 255, .2);
  }
}

.mdc-list-divider--inset {
  $mdc-list-divider-inset-amt: /* text offset */ 72px - /* padding offset */ $mdc-list-side-padding;

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

  width: calc(100% - #{$mdc-list-divider-inset-amt});
}

// postcss-bem-linter: end

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

.mdc-list-group {
  padding: 0 $mdc-list-side-padding;

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

    @include mdc-typography(body2);
    @include mdc-theme-prop(color, text-primary-on-background);

    @include mdc-theme-dark {
      @include mdc-theme-prop(color, text-primary-on-dark);
    }

    margin: $mdc-list-subheader-margin 0;
  }

  // Reset padding on mdc-list since it's already accounted for by the list group.
  .mdc-list {
    padding: 0;
  }
}

// postcss-bem-linter: end