/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use '@material/rtl/rtl' as mdc-rtl;
@use '@material/theme/theme' as mdc-theme;
@use '@material/typography' as mdc-typography;
@use '../../theme';
@use '@material/ripple/ripple' as mdc-ripple;
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
@use '../../typography/mixins' as typography-mixins;
@use './variables';

@mixin core-styles() {
  .forge-list-item {
    @include base;
  
    ::slotted([slot=leading]),
    ::slotted([slot=trailing]) {
      font-size: 1.5rem;
    }

    ::slotted([slot=leading]) {
      @include leading;
    }

    ::slotted([slot=trailing]) {
      @include trailing;
    }
  
    ::slotted([slot=avatar]) {
      @include leading;
      @include avatar;
      @include avatar-icon;
    }
  
    &:not(.forge-list-item--static):not(.forge-list-item--disabled) {
      &.forge-list-item {
        @include interactable;
      }
    }
  
    &__text {
      @include text;
    }

    ::slotted([slot=title]) {
      @include title;
    }

    ::slotted([slot=subtitle]),
    ::slotted([slot=tertiary-title]) {
      @include subtitle;
    }

    &--two-line {
      @include two-line;
    }
  
    &--three-line {
      @include three-line;
    }
  
    &--dense {
      @include dense;
  
      ::slotted([slot=leading]),
      ::slotted([slot=trailing]) {
        font-size: 1.25rem;
      }

      ::slotted([slot=leading]) {
        @include theme.css-custom-property(margin-right, --forge-list-item-leading-margin-right, 12px);
      }
  
      ::slotted(.forge-list-item__title) {
        @include mdc-typography.typography(body2);
      }

      &.forge-list-item--two-line {
        @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-two-line-height);
      }

      &.forge-list-item--three-line {
        @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-three-line-height);
      }
    }
  
    &--wrap {
      @include theme.css-custom-property(height, --forge-list-item-height, auto);

      ::slotted([slot=title]),
      ::slotted([slot=subtitle]),
      ::slotted([slot=tertiary-title]),
      .forge-list-item__text {
        @include text-wrap;
      }
    }

    &--indented {
      @include indented;
    }
  
    // Keep this at the bottom so that these selectors will override the ones
    // above that have the same specificity.
    &--active {
      @include active;
    }
  
    // Keep this at the bottom so that these selectors will override the ones
    // above that have the same specificity.
    &--selected,
    &--activated {
      @include selected;
      @include subtitle-selected;
      @include tertiary-title-selected;
  
      ::slotted([slot=leading]),
      ::slotted([slot=trailing]) {
        @include selected-leading-trailing;
      }
  
      ::slotted([slot=avatar].forge-list-item__avatar-icon) {
        @include selected-avatar-icon;
      }
    }
  
    &--disabled {
      @include disabled;
  
      ::slotted([slot=leading]),
      ::slotted([slot=trailing]) {
        @include disabled;
      }
    }
  
    &[role=link] {
      cursor: pointer;
    }
  }
}

@mixin drawer-context-styles() {
  .forge-list-item {
    @include drawer;

    &--static {
      cursor: initial;
    }

    &--indented {
      @include indented-drawer;
    }

    &--two-line {
      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$two-line-height - 8px);
      @include theme.css-custom-property(height, --forge-list-item-height, variables.$two-line-height - 8px);
    }

    &--three-line {
      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$three-line-height - 8px);
      @include theme.css-custom-property(height, --forge-list-item-height, variables.$three-line-height - 8px);
    }

    &:nth-child(1) {
      margin-top: 4px;
      margin-bottom: 4px;
    }

    &--dense {
      @include dense;

      ::slotted([slot=leading]),
      ::slotted([slot=trailing]) {
        font-size: 1.25rem;
      }

      .forge-list-item__text {
        @include mdc-typography.typography(body2);
      }
    }

    &--wrap {
      @include theme.css-custom-property(height, --forge-list-item-height, auto);
      @include theme.css-custom-property(padding, --forge-list-item-padding, 4px variables.$drawer-inline-padding);
      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$drawer-single-line-height);
    }

    &--disabled {
      @include theme.css-custom-property(cursor, --forge-list-item-cursor, not-allowed);
    }
  }
}

/// Styles the list item host element.
@mixin host() {
  display: block;
  contain: content;
}

@mixin base() {
  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$single-line-height);
  @include theme.css-custom-property(max-height, --forge-list-item-max-height, none);
  @include theme.css-custom-property(height, --forge-list-item-height, variables.$single-line-height);
  @include theme.css-custom-property(padding, --forge-list-item-padding, #{variables.$block-padding variables.$inline-padding});
  @include theme.css-custom-property(margin-left, --forge-list-item-indent, 0);
  @include theme.css-custom-property(align-items, --forge-list-item-align-items, center);

  position: relative;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;

  &:focus {
    outline: none;
  }
}

@mixin interactable() {
  @include mdc-ripple.surface;
  @include mdc-ripple.radius-bounded;
  @include mdc-ripple-theme.states(on-surface);
  @include mdc-ripple-theme.states-activated(primary);
  @include mdc-ripple-theme.states-selected(primary);

  &--selected:focus:hover.mdc-ripple-upgraded--background-focused:not(.mdc-ripple-upgraded--foreground-activation)::before {
    opacity: mdc-ripple-theme.states-opacity(primary, activated) + mdc-ripple-theme.states-opacity(primary, focus) +
      mdc-ripple-theme.states-opacity(primary, hover);
  }

  &:focus,
  &--active {
    &:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation) {
      &::before {
        opacity: mdc-ripple-theme.states-opacity(primary, focus);
      }
      &:hover {
        &::before {
          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover);
        }
      }

      &::before,
      &::after {
        @include mdc-theme.property(background-color, on-surface);
      }
    }
  }

  &--active:focus {
    &.forge-list-item--selected.forge-list-item--activated:not(.mdc-ripple-upgraded--foreground-activation) {
      &::before {
        opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, activated);
      }
      &:hover {
        &::before {
          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover) +
            mdc-ripple-theme.states-opacity(primary, activated);
        }
      }
    }
  }
}

@mixin text() {
  @include mdc-typography.overflow-ellipsis;

  width: 100%;
}

@mixin text-wrap() {
  text-overflow: clip;
  white-space: normal;
}

@mixin drawer {
  @include theme.css-custom-property(margin, --forge-list-item-margin, variables.$margin-drawer);
  @include theme.css-custom-property(padding, --forge-list-item-padding, 0 variables.$drawer-inline-padding);
  @include theme.css-custom-property(border-radius, --forge-list-item-border-radius, 4px);
  @include theme.css-custom-property(cursor, --forge-list-item-cursor, pointer);
  @include theme.css-custom-property(height, --forge-list-item-height, variables.$drawer-single-line-height);

  font-size: 0.875rem;
  font-weight: 500;
}

@mixin leading() {
  @include mdc-theme.property(color, text-secondary-on-background);
  @include theme.css-custom-property(margin-left, --forge-list-item-leading-margin-left, 0);
  @include theme.css-custom-property(margin-right, --forge-list-item-leading-margin-right, 32px);

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

@mixin trailing() {
  @include mdc-theme.property(color, text-secondary-on-background);
  @include mdc-rtl.reflexive-property(margin, auto, 0, '.forge-list-item');
}

@mixin selected-leading-trailing() {
  @include mdc-theme.property(color, primary);
}

@mixin avatar() {
  margin-left: 0;
  margin-right: 16px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  display: inline-flex;
}

@mixin avatar-icon() {
  @include mdc-theme.property(background-color, text-secondary-on-background);
  @include mdc-theme.property(color, on-primary);
}

@mixin title() {
  @include mdc-typography.overflow-ellipsis;

  display: block;
}

@mixin subtitle() {
  @include mdc-typography.typography(body2);
  @include mdc-typography.overflow-ellipsis;
  @include mdc-theme.property(color, text-secondary-on-background);

  display: block;
}

@mixin subtitle-selected {
  .forge-list-item__text {
    ::slotted(.forge-list-item__subtitle),
    .forge-list-item__subtitle {
      @include mdc-theme.property(color, primary);
      opacity: 0.87;
    }
  }
}

@mixin tertiary-title-selected {
  .forge-list-item__text {
    ::slotted(.forge-list-item__tertiary-title),
    .forge-list-item__tertiary-title {
      @include mdc-theme.property(color, primary);
      opacity: 0.87;
    }
  }
}

@mixin two-line() {
  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$two-line-height);
  @include theme.css-custom-property(height, --forge-list-item-height, variables.$two-line-height);
}

@mixin three-line() {
  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$three-line-height);
  @include theme.css-custom-property(height, --forge-list-item-height, variables.$three-line-height);
}

@mixin dense() {
  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-single-line-height);
  @include theme.css-custom-property(height, --forge-list-item-height, variables.$dense-height);
}

@mixin disabled() {
  @include theme.css-custom-property(cursor, --forge-list-item-cursor, not-allowed);
  @include mdc-theme.property(color, text-disabled-on-light);
}

@mixin selected() {
  @include mdc-theme.property(color, primary);
}

@mixin selected-focus() {
  @include mdc-theme.property(color, primary);
}

@mixin selected-avatar-icon() {
  @include mdc-theme.property(background-color, text-disabled-on-background);
  @include mdc-theme.property(color, on-surface);
}

@mixin indented() {
  @include theme.css-custom-property(margin-left, --forge-list-item-indent, variables.$indent);
}

@mixin indented-drawer() {
  @include theme.css-custom-property(margin-left, --forge-list-item-indent, variables.$indent-drawer);
}

@mixin active() {
  &.forge-list-item--selected,
  &.forge-list-item--activated {
    &:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item {
      &::before {
        opacity: mdc-ripple-theme.states-opacity(primary, selected) + mdc-ripple-theme.states-opacity(primary, focus);
      }
      &:hover {
        &::before {
          opacity: mdc-ripple-theme.states-opacity(primary, selected) + mdc-ripple-theme.states-opacity(primary, focus) +
            mdc-ripple-theme.states-opacity(primary, hover);
        }
      }
    }
  }
}
