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

/**
 * 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) {
  /* stylelint-disable scss/dollar-variable-pattern */

  $text-offset: 72px;
  $side-padding: 16px;
  $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");

  /* stylelint-enable scss/dollar-variable-pattern */
}

/* 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 16px 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 {
  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, 16px, ".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;
  }
  /* stylelint-enable plugin/selector-bem-pattern */
}

/* postcss-bem-linter: end */

/* 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 */ 16px;

  @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 16px;

  &__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. */
  /* stylelint-disable plugin/selector-bem-pattern */
  .mdc-list {
    padding: 0;
  }
  /* stylelint-enable plugin/selector-bem-pattern */
}

/* postcss-bem-linter: end */