//
// Copyright IBM Corp. 2022, 2026
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use 'sass:map';

@use '../button';
@use '../overflow-menu';
@use '../../config' as *;
@use '../../motion' as *;
@use '../../spacing' as *;
@use '../../theme' as *;
@use '../../type' as *;
@use '../../utilities/convert';
@use '../../utilities/button-reset';
@use '../../utilities/focus-outline' as *;
@use '../../utilities/custom-property';
@use '../../utilities/layout';

/// Contained List styles
/// @access public
/// @group contained-list
@mixin contained-list {
  .#{$prefix}--contained-list {
    @include layout.use('size', $default: 'lg', $min: 'sm', $max: 'xl');
    @include layout.use('density', $default: 'normal');
  }

  .#{$prefix}--contained-list .#{$prefix}--tag {
    @include layout.redefine-tokens(
      (
        size: (
          height: (
            xs: convert.to-rem(18px),
            sm: convert.to-rem(18px),
            md: convert.to-rem(24px),
            lg: convert.to-rem(24px),
            xl: convert.to-rem(24px),
          ),
        ),
      )
    );

    @include layout.use('size', $default: 'md', $min: 'sm', $max: 'xl');
  }

  .#{$prefix}--contained-list > ul {
    padding: 0;
    margin: 0;
  }

  .#{$prefix}--contained-list__header {
    position: sticky;
    z-index: 1;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    inset-block-start: 0;
    padding-inline: layout.density('padding-inline');
  }

  .#{$prefix}--contained-list__label {
    inline-size: 100%;
  }

  .#{$prefix}--contained-list .#{$prefix}--search {
    position: sticky;
    z-index: 1;
    inset-block-start: layout.size('height');

    &.#{$prefix}--search--expandable .#{$prefix}--search-input {
      background-color: $field;
    }
  }

  .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-input {
    background-color: $background;
    border-block-end: 1px solid $border-subtle;
  }

  .#{$prefix}--contained-list
    .#{$prefix}--search
    .#{$prefix}--search-close::before {
    display: none;
  }

  .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-close {
    border-inline-end: 2px solid transparent;
    outline: none;

    &:focus {
      @include focus-outline('outline');
    }
  }

  .#{$prefix}--contained-list
    .#{$prefix}--search
    .#{$prefix}--search-input
    ~ .#{$prefix}--search-close:hover {
    border-block-end: 1px solid transparent;
  }

  .#{$prefix}--contained-list
    .#{$prefix}--search
    .#{$prefix}--search-input:focus
    ~ .#{$prefix}--search-close:hover {
    border: 2px solid $focus;
    border-inline-start: 0;
    outline: none;
  }

  // "On Page" variant

  .#{$prefix}--contained-list--on-page + .#{$prefix}--contained-list--on-page {
    margin-block-start: $spacing-05;
  }

  .#{$prefix}--contained-list--on-page .#{$prefix}--contained-list__header {
    @include type-style('heading-compact-01');

    background-color: $layer-background;
    block-size: layout.size('height');
    border-block-end: 1px solid $border-subtle;
    color: $text-primary;
  }

  .#{$prefix}--layer-two
    .#{$prefix}--contained-list--on-page
    .#{$prefix}--contained-list__header {
    background-color: $layer-01;
  }

  .#{$prefix}--layer-three
    .#{$prefix}--contained-list--on-page
    .#{$prefix}--contained-list__header {
    background-color: $layer-02;
  }

  // "Disclosed" variant

  .#{$prefix}--contained-list--disclosed .#{$prefix}--contained-list__header {
    @include type-style('label-01');

    background-color: $layer;
    block-size: $spacing-07;
    color: $text-secondary;
  }

  // List item

  .#{$prefix}--contained-list-item {
    position: relative;
    display: list-item;
    list-style: none;
  }

  .#{$prefix}--contained-list-item:not(:first-of-type) {
    margin-block-start: -1px;
  }

  .#{$prefix}--contained-list-item__content {
    box-sizing: border-box;
  }

  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content {
    @include button-reset.reset;

    text-align: start;
    transition: background-color $duration-moderate-01
      motion(standard, productive);
  }

  .#{$prefix}--contained-list-item__content,
  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content {
    // https://caniuse.com/mdn-css_types_length_lh
    --temp-1lh: (
      #{custom-property.get-var(
          'body-01-line-height',
          map.get($body-01, line-height)
        )} * 1em
    );

    @include type-style('body-01');

    padding: calc(calc((#{layout.size('height')} - var(--temp-1lh)) / 2))
      layout.density('padding-inline');
    color: $text-primary;
    min-block-size: layout.size('height');
  }

  .#{$prefix}--contained-list-item:not(:last-of-type)::before {
    position: absolute;
    background-color: $border-subtle;
    block-size: 1px;
    content: '';
    inset-block-end: 0;
    inset-inline: 0;
  }

  .#{$prefix}--contained-list--inset-rulers
    .#{$prefix}--contained-list-item:not(:last-of-type)::before {
    inset-inline: layout.density('padding-inline')
      layout.density('padding-inline');
  }

  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content:not(:disabled):hover {
    background-color: $layer-hover;
  }

  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content:not(:disabled):active {
    background-color: $layer-active;
  }

  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content:disabled {
    color: $text-disabled;
    cursor: not-allowed;
  }

  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content:focus {
    outline: none;
  }

  .#{$prefix}--contained-list-item--clickable
    .#{$prefix}--contained-list-item__content:focus::after {
    @include focus-outline('outline');

    position: absolute;
    content: '';
    inset: 0;
  }

  .#{$prefix}--contained-list-item--with-action
    .#{$prefix}--contained-list-item__content {
    padding-inline-end: $spacing-10;
  }

  .#{$prefix}--contained-list__action,
  .#{$prefix}--contained-list-item__action {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    inset-block-start: 0;
    inset-inline: 0;
    pointer-events: none;
  }

  .#{$prefix}--contained-list__action > *,
  .#{$prefix}--contained-list-item__action > * {
    pointer-events: all;
  }

  .#{$prefix}--contained-list-item--with-icon
    .#{$prefix}--contained-list-item__content {
    display: grid;
    column-gap: $spacing-04;
    grid-template-columns: 1rem 1fr;
  }

  .#{$prefix}--contained-list-item__icon {
    display: inline-flex;
    padding-block-start: $spacing-01;
  }
}