@import "./ListItem.grid.less";
@import "./Prompt/ListItemPrompt.less";
@import (reference) "./../styles/less/ring.less";
@import (reference) "./ListItem.vars.less";

.wds-list-item {
  list-style: none;
  width: 100%;
  border-radius: var(--radius-medium);
  position: relative;
  padding: var(--size-12) 0;
  container-type: inline-size;

  & + .wds-list-item-spotlight,
  .wds-list-item-spotlight + & {
    margin-top: var(--size-16);
  }

  &:focus-within {
    z-index: 1;
  }

  &-view {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;

    &.fullyInteractive {
      margin-bottom: 0;
      &:before {
        content: "";
        position: absolute;
        inset: 0;
      }
    }
  }

  a {
    text-underline-offset: calc(var(--size-4) / 2);

    .wds-list-item-subtitle,
    .wds-list-item-subtitle-value {
      color: var(--color-content-secondary);
    }
  }

  &-interactive {
    .wds-list-item-control:focus-visible,
    // checkboxes are the only control that didn't work with .wds-list-item-control:focus-visible above. TODO: update checkbox so that it does
    .np-checkbox-button:has(input[type="checkbox"]:focus-visible) .tw-checkbox-button {
      outline: none;
    }

    .wds-list-item-additional-info {
      .ring-offset-0;
    }

    a.wds-list-item-control {
      &,
      &:hover,
      &:focus {
        text-decoration: none;
      }

      &:has(.wds-list-item-control_pseudo-element) {
        position: relative;
        z-index: 1;
      }

      &.wds-list-item-control_pseudo-element {
        &:before {
          content: "";
          position: absolute;
          inset: 0;
        }
      }
    }

    // spotlighted list item has extra horizontal padding so the focus
    // and hover styles can be rendered within the main container.
    &.wds-list-item-spotlight {
      &:has(.wds-list-item-control:focus-visible),
      &:has(input[type="checkbox"]:focus-visible) {
        .ring();
        outline-offset: -1px;
      }

      &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
        &:hover {
          background-color: unset;
        }
      }
    }

    // non-spotlighted list item has no horizontal padding so the focus
    // and hover styles have to be rendered out of bounds.
    &:not(.wds-list-item-spotlight) {
      &:has(.wds-list-item-control:focus-visible),
      &:has(input[type="checkbox"]:focus-visible) {
        &:before {
          .ring();
          content: "";
          position: absolute;
          inset: 0 -8px;
          border-radius: var(--radius-medium);
          outline-offset: -1px;
        }
      }

      &:not(.disabled, :disabled) {
        &:hover,
        &:active {
          &:before {
            content: "";
            position: absolute;
            inset: 0 -8px;
            border-radius: var(--radius-medium);
          }
        }

        &:hover:before {
          background-color: var(--color-background-screen-hover);
        }

        &:active:before {
          background-color: var(--color-background-screen-active);
        }
      }

      &:has(.wds-list-item-prompt:hover a, .wds-list-item-prompt:hover button) {
        &:hover:before {
          background-color: unset;
        }
      }
    }

    &:not(.disabled, :disabled):hover {
      .wds-list-item-control-wrapper {
        .wds-Button {
          background-color: var(--Button-background-hover);
          color: var(--Button-color-hover);
          transition: none;
        }
      }
    }

    .wds-list-item-button-control {
      .wds-Button {
        transition: none;
      }
    }
  }

  &-media {
    grid-area: media;
    display: flex;
    align-items: start;

    &-image-wrapper {
      width: var(--wds-list-item-media-size);
      height: var(--wds-list-item-media-size);
    }

    &-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  &-body {
    grid-area: body;
    align-items: start;
    width: 100%;
    display: grid;
    grid-template-columns: var(--wds-list-item-body-left, 1fr) var(
        --wds-list-item-body-right,
        max-content
      );
    gap: var(--size-16);
    word-break: break-word;
  }

  &-titles,
  &-value {
    display: flex;
    flex-direction: column;
    justify-content: center;

    @container (width > @wds-list-item-cq-max) {
      min-height: var(--wds-list-item-value-min-height, 100%);
    }
  }

  &-value {
    text-align: right;
  }

  &-title,
  &-title-value {
    color: var(--color-content-primary);
  }

  &-body-center {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  &-additional-info {
    grid-area: info;
    color: var(--color-content-tertiary);
    margin-top: calc(var(--size-4) * -1);

    button.np-link {
      text-align: start;
    }
  }

  &-control-wrapper {
    grid-area: control;
  }

  &-navigation {
    .tw-icon-chevron-right {
      color: var(--color-interactive-secondary);
    }
  }

  &-control {
    flex: 0 0 auto;
  }

  &.disabled {
    opacity: unset;

    &,
    label {
      cursor: not-allowed;
    }

    .wds-list-item-media,
    .np-avatar-view-content,
    .wds-list-item-title,
    .wds-list-item-title-value,
    .wds-list-item-subtitle,
    .wds-list-item-subtitle-value,
    .wds-list-item-additional-info,
    .wds-list-item-additional-info :is(strong, b) {
      color: var(--color-content-tertiary);
    }

    .wds-list-item-media,
    .wds-list-item-body,
    .wds-list-item-additional-info {
      opacity: 0.93;
    }
  }

  &.disabled--has-prompt-reason {
    .wds-list-item-prompt {
      opacity: 0.93;
    }
  }

  &-spotlight {
    .wds-list-item-gridWrapper {
      padding-left: var(--size-12);
      padding-right: var(--size-12);
    }

    &-active {
      background-color: var(--color-background-neutral);
      &:not(.disabled, :disabled) {
        &:hover {
          background-color: var(--color-background-neutral-hover);
        }
        &:active {
          background-color: var(--color-background-neutral-active);
        }
      }
    }

    &-inactive {
      background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);

      &:not(.disabled, :disabled) {
        &:hover {
          background-color: color-mix(
            in srgb,
            var(--color-background-neutral-hover) 35%,
            transparent
          );
        }
        &:active {
          background-color: color-mix(
            in srgb,
            var(--color-background-neutral-active) 45%,
            transparent
          );
        }
      }
    }
  }

  .wds-list-item-spotlight__border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    rect {
      --wds-list-item-spotlight-borderWidth: 1px;
      --wds-list-item-spotlight-borderWidthOffset: 0.5px; // half of the border width to center the border
      --wds-list-item-spotlight-strokeDashSize: calc(var(--size-12) * 0.5);

      fill: none;
      stroke: var(--color-border-neutral);
      width: calc(100% - var(--wds-list-item-spotlight-borderWidth));
      height: calc(100% - var(--wds-list-item-spotlight-borderWidth));
      x: var(--wds-list-item-spotlight-borderWidthOffset);
      y: var(--wds-list-item-spotlight-borderWidthOffset);
      rx: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
      ry: calc(var(--radius-medium) - var(--wds-list-item-spotlight-borderWidthOffset));
      stroke-dasharray: var(--wds-list-item-spotlight-strokeDashSize)
        var(--wds-list-item-spotlight-strokeDashSize);
    }
  }
}