//
// Copyright 2019 Stijn de Witt. Some rights reserved.
// Licensed under the MIT Open Source license. 
// https://opensource.org/licenses/MIT
// See LICENSE for details.
//
// Based on code copyright 2018 Google Inc. All Rights Reserved.
// Licensed under the Apache License, Version 2.0.
// http://www.apache.org/licenses/LICENSE-2.0
// See LICENSE-MDC for details.
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under these licenses is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the licenses for the specific language governing permissions and
// limitations under these licenses.
// 

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

// postcss-bem-linter: define list

.solids .list {
  @include typography(subtitle1);
  @include list_item_primary_text_ink_color(text-primary-on-background);
  @include list_item_secondary_text_ink_color(text-secondary-on-background);
  @include list_item_graphic_fill_color(transparent);
  @include list_item_graphic_ink_color(text-icon-on-background);
  @include list_item_meta_ink_color(text-hint-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($typography-styles, body1), line-height);
  list-style-type: none;

  .item {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    height: 48px;
    padding: 0 $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.
    &.selected,
    &.activated {
      @include list_item_primary_text_ink_color(primary);
      @include list_item_graphic_ink_color(primary);
    }

    .graphic {
      @include list_graphic_size_(24px);
    
      display: inline-flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
    }
    
    .meta {
      @include mdc-rtl-reflexive-property(margin, auto, 0, ".list_item");
    }
    
    .text,
    .secondary_text {
      @include typography-overflow-ellipsis;
      display: block;
    }
    
    .secondary_text {
      @include typography(body2);
    }
  }

  &.dense {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: .812rem;

    // Match the font size to the primary text when dense
    // stylelint-disable plugin/selector-bem-pattern
    .item {
      height: 40px;

      .secondary_text {
        font-size: inherit;
      }

      .graphic {
        @include list_graphic_size_(20px);
      }
    }
  }

  &.avatars {
    .item {
      height: 56px;

      .graphic {
        @include list_graphic_size_(40px);
        border-radius: 50%;
      }
    }
  }

  &:not(.non_interactive) >.item {
    // 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.
    @include mdc-ripple-surface;
    @include mdc-ripple-radius-bounded;
    @include mdc-states;
    @include mdc-states-activated(primary);
    @include mdc-states-selected(primary);
  }
  
  &.two_line {
    .item {
      height: 72px;
    }

    &.dense {
      .item {
        height: 60px;
      }
    }
  }

  &.avatars.dense .item {
    height: 48px;
    .graphic {
      @include list_graphic_size_(36px);
    }
  }

  // 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.item {
    color: inherit;
    text-decoration: none;
  }
}

.solids .divider {
  height: 0;
  margin: 0;
  border: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  $divider-color: if(
    tone($mdc-theme-background) == "dark",
    $list_divider_color_on_dark_bg,
    $list_divider_color_on_light_bg
  );
  @include mdc-theme-prop(border-bottom-color, $divider-color);

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

  &.inset {
    @include mdc-rtl-reflexive-box(margin, left, $list_text_offset, ".list_group");
    width: calc(100% - #{$list_text_offset});

    &.padded {
      width: calc(100% - #{$list_text_offset} - #{$list_side_padding});
    }
  }
}

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

  $list_subheader_virtual_height: 3rem;
  $list_subheader_leading: map-get(map-get($typography-styles, body1), line-height);
  $list_subheader_margin:
    ($list_subheader_virtual_height - $list_subheader_leading) / 2;
  @include list_group_subheader_ink_color(text-primary-on-background);

  .subheader {
    @include typography(subtitle1);
    margin: $list_subheader_margin $list_side_padding;
  }

}