/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use './core' as *;
@use '../../focus-indicator';
@use '../../state-layer';
@use '../../core/styles/shape';

//
// Host
//

$_host-tokens: [indent dense-indent disabled-cursor];

:host {
  @include tokens($includes: $_host-tokens);
}

:host {
  @include container;
}

:host([hidden]) {
  display: none;
}

//
// Base
//

.forge-list-item {
  @include tokens($excludes: $_host-tokens);
}

.forge-list-item {
  @include base;

  &.interactive {
    cursor: #{token(cursor)};
  }

  &.disabled {
    @include disabled;

    ::slotted(button) {
      cursor: #{token(disabled-cursor)};
    }
  }
}

.anchor {
  @include anchor-internal;
}

// Two-line
:host([two-line]) {
  .forge-list-item {
    @include two-line;
  }
}

// Three-line
:host([three-line]) {
  .forge-list-item {
    @include three-line;
  }
}

// Dense
:host([dense]) {
  .forge-list-item {
    @include dense;
  }

  .text-container {
    @include dense-text;
  }
}

// Dense indented
:host([dense][indented]) {
  @include dense-indented;
}

// Dense two-line
:host([dense][two-line]) {
  .forge-list-item {
    @include dense-two-line;
  }
}

// Dense three-line
:host([dense][three-line]) {
  .forge-list-item {
    @include dense-three-line;
  }
}

// Dense start/end
:host([selected]) {
  .forge-list-item {
    @include selected;

    ::slotted([slot=start]),
    ::slotted([slot=end]),
    ::slotted([slot=leading]),
    ::slotted([slot=trailing]) {
      @include start-end-selected;
    }

    ::slotted([slot=start]),
    ::slotted([slot=leading]) {
      @include start-selected;
    }

    ::slotted([slot=end]),
    ::slotted([slot=trailing]) {
      @include end-selected;
    }
  }

  .text-container {
    @include text-container-selected;
  }

  forge-state-layer {
    @include state-layer.provide-theme((
      color: #{token(selected-color)}
    ));
  }
}

// Indented
:host([indented]) {
  @include indented;
}

// Text container base
.text-container {
  @include text-container;
}

// Text slotted elements
slot[name=secondary-text],
slot[name=tertiary-text] {
  &::slotted(*) {
    @include text;
  }

  :host([selected]) &::slotted(*) {
    @include text-selected;
  }
}

// Button slotted elements
::slotted(:is(button, [role=button][tabindex], [forge-list-item-button])) {
  @include button;
}

// Anchor slotted elements
::slotted(a) {
  @include anchor;
}

// Start/end slotted elements
::slotted([slot=start]),
::slotted([slot=end]),
::slotted([slot=leading]),
::slotted([slot=trailing]) {
  @include start-end-base;
}

// Interactive slotted form controls to hide state-layer and focus-indicator
:host(:not([noninteractive])) {
  ::slotted(:is(forge-checkbox,forge-radio,forge-switch):is([slot=start],[slot=end],[slot=leading],[slot=trailing]):not([forge-ignore])) {
    @include focus-indicator.provide-theme(( display: none ));
    @include state-layer.provide-theme(( display: none ));
  }
}

// Start slotted elements
::slotted([slot=start]),
::slotted([slot=leading]) {
  :host([selected]) & {
    @include start-selected;
  }
}

// End slotted elements
::slotted([slot=end]),
::slotted([slot=trailing]) {
  :host([selected]) & {
    @include end-selected;
  }
}

// Wrap styles
:host([wrap]) {
  .forge-list-item {
    @include wrap;
  }

  .text-container {
    @include text-container-wrap;
  }

  slot[name=secondary-text],
  slot[name=tertiary-text] {
    &::slotted(*) {
      @include text-wrap;
    }
  }
}

forge-focus-indicator {
  z-index: 1; // Fixes an animation artifact in Safari

  @include focus-indicator.provide-theme((
    shape: shape.variable(medium) // TODO: use list-item token?
  ));
}

forge-state-layer {
  border-radius: inherit;
}
