@import (reference) "./ListItem.vars.less";

.wds-list-item {
  &-gridWrapper {
    display: grid;
    gap: var(--size-4) var(--size-12);

    &.wds-list-item-hasMedia-hasControl,
    &.wds-list-item-hasMedia-noControl {
      &.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) {
        .wds-list-item-prompt {
          margin-top: -2px;
        }
      }
    }

    @container (width > @wds-list-item-cq-max) {
      .wds-list-item-control-wrapper {
        height: var(--wds-list-item-control-wrapper-height);
        align-content: center;
      }

      .wds-list-item-media-image{
        object-position: center;
      }

      &.wds-list-item-hasMedia-hasControl {
        &.wds-list-item-hasInfo-hasPrompt {
          grid-template-columns: auto 1fr auto;
          grid-template-rows: auto auto auto;
          grid-template-areas:
              "media body control"
              ". info ."
              ". prompt prompt";
        }

        &.wds-list-item-hasInfo-noPrompt {
          grid-template-columns: auto 1fr auto;
          grid-template-rows: auto auto;
          grid-template-areas:
              "media body control"
              ". info ."
        }

        &.wds-list-item-noInfo-hasPrompt {
          grid-template-columns: auto 1fr auto;
          grid-template-rows: auto auto;
          grid-template-areas:
              "media body control"
              ". prompt prompt";
        }

        &.wds-list-item-noInfo-noPrompt {
          grid-template-columns: auto 1fr auto;
          grid-template-rows: auto;
          grid-template-areas:
              "media body control"
        }
      }

      &.wds-list-item-hasMedia-noControl {
        &.wds-list-item-hasInfo-hasPrompt {
          grid-template-columns: auto 1fr;
          grid-template-rows: auto auto;
          grid-template-areas:
              "media body"
              ". info"
              ". prompt";
        }

        &.wds-list-item-hasInfo-noPrompt {
          grid-template-columns: auto 1fr;
          grid-template-rows: auto auto auto;
          grid-template-areas:
              "media body"
              ". info"
        }

        &.wds-list-item-noInfo-hasPrompt {
          grid-template-columns: auto 1fr;
          grid-template-rows: auto auto;
          grid-template-areas:
              "media body"
              ". prompt";
        }

        &.wds-list-item-noInfo-noPrompt {
          grid-template-columns: auto 1fr;
          grid-template-rows: auto;
          grid-template-areas:
              "media body"
        }
      }

      &.wds-list-item-noMedia-hasControl {
        .wds-list-item-prompt {
          grid-column: 1 / -1;
        }

        &.wds-list-item-hasInfo-hasPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto auto;
          grid-template-areas:
              "body control"
              "info ."
              "prompt prompt";
        }

        &.wds-list-item-hasInfo-noPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body control"
              "info ."
        }

        &.wds-list-item-noInfo-hasPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body control"
              "prompt prompt";
        }

        &.wds-list-item-noInfo-noPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto;
          grid-template-areas:
              "body control"
        }
      }

      &.wds-list-item-noMedia-noControl {
        .wds-list-item-prompt {
          grid-column: 1 / -1;
        }

        &.wds-list-item-hasInfo-hasPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto auto;
          grid-template-areas:
              "body"
              "info"
              "prompt";
        }

        &.wds-list-item-hasInfo-noPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body"
              "info"
        }

        &.wds-list-item-noInfo-hasPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body"
              "prompt";
        }

        &.wds-list-item-noInfo-noPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          grid-template-areas:
              "body"
        }
      }
    }

    // LESS struggles with ranged container queries so
    // we need to escape the interpolated expression.
    @container (~"@{wds-list-item-cq-min} < width <= @{wds-list-item-cq-max}") {
      .wds-list-item-media-image{
        object-position: bottom left;
      }

      .wds-list-item-control-wrapper {
        align-content: start;
      }

      &.wds-list-item-hasMedia-hasControl {
        &.wds-list-item-hasInfo-hasPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto auto auto;
          grid-template-areas:
              "media media"
              "body control"
              "info control"
              "prompt prompt";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "media"
                    "body"
                    "info"
                    "prompt"
                    "control";
              }
        }

        &.wds-list-item-hasInfo-noPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto auto;
          grid-template-areas:
              "media media"
              "body control"
              "info control";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "media"
                    "body"
                    "info"
                    "control";
              }
        }

        &.wds-list-item-noInfo-hasPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto auto;
          grid-template-areas:
              "media media"
              "body control"
              "prompt prompt";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "media"
                    "body"
                    "prompt"
                    "control";
              }
        }

        &.wds-list-item-noInfo-noPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto;
          grid-template-areas:
              "media media"
              "body control";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "media"
                    "body"
                    "control";
              }
        }
      }

      &.wds-list-item-hasMedia-noControl {
        &.wds-list-item-hasInfo-hasPrompt {
          grid-template-columns: auto auto;
          grid-template-rows: auto auto auto auto;
          grid-template-areas:
              "media media"
              "body body"
              "info info"
              "prompt prompt";
        }

        &.wds-list-item-hasInfo-noPrompt {
          grid-template-columns: auto 1fr;
          grid-template-rows: auto auto auto;
          grid-template-areas:
              "media media"
              "body body"
              "info info";
        }

        &.wds-list-item-noInfo-hasPrompt {
          grid-template-columns: auto 1fr;
          grid-template-rows: auto auto auto;

          grid-template-areas:
              "media media"
              "body body"
              "prompt prompt";
        }

        &.wds-list-item-noInfo-noPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
          grid-template-areas:
              "media"
              "body"
        }
      }

      &.wds-list-item-noMedia-hasControl {
        .wds-list-item-prompt {
          grid-column: 1 / -1;
        }

        &.wds-list-item-hasInfo-hasPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto auto;
          grid-template-areas:
              "body control"
              "info control"
              "prompt prompt";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "body"
                    "info"
                    "prompt"
                    "control";
              }
        }

        &.wds-list-item-hasInfo-noPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body control"
              "info control";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "body"
                    "info"
                    "control";
              }
        }

        &.wds-list-item-noInfo-hasPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body control"
              "prompt prompt";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "body"
                    "prompt"
                    "control";
              }
        }

        &.wds-list-item-noInfo-noPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto;
          grid-template-areas:
              "body control";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "body"
                    "control";
              }
        }
      }

      &.wds-list-item-noMedia-noControl {
        .wds-list-item-prompt {
          grid-column: 1 / -1;
        }

        &.wds-list-item-hasInfo-hasPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto auto;
          grid-template-areas:
              "body"
              "info"
              "prompt";
        }

        &.wds-list-item-hasInfo-noPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body"
              "info"
        }

        &.wds-list-item-noInfo-hasPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body"
              "prompt";
        }

        &.wds-list-item-noInfo-noPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          grid-template-areas:
              "body"
        }
      }

      .wds-list-item-button-control--hasPrompt{
        margin-top: var(--size-4);
      }
    }

    @container (width <= @wds-list-item-cq-min) {
      .wds-list-item-control-wrapper {
        align-content: start;
      }
      &.wds-list-item-hasMedia-hasControl {
        &.wds-list-item-hasInfo-hasPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto auto;
          grid-template-areas:
              "body control"
              "info control"
              "prompt prompt";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "body"
                    "info"
                    "prompt"
                    "control";
              }
        }

        &.wds-list-item-hasInfo-noPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body control"
              "info control";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "body"
                    "info"
                    "control";
              }
        }

        &.wds-list-item-noInfo-hasPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body control"
              "prompt prompt";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "body"
                    "prompt"
                    "control";
              }
        }

        &.wds-list-item-noInfo-noPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto;
          grid-template-areas:
              "body control";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "body"
                    "control";
              }
        }
      }

      &.wds-list-item-hasMedia-noControl {
        &.wds-list-item-hasInfo-hasPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto auto;
          grid-template-areas:
              "body"
              "info"
              "prompt";
        }

        &.wds-list-item-hasInfo-noPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body"
              "info"
        }

        &.wds-list-item-noInfo-hasPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body"
              "prompt";
        }

        &.wds-list-item-noInfo-noPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          grid-template-areas:
              "body"
        }
      }

      &.wds-list-item-noMedia-hasControl {
        .wds-list-item-prompt {
          grid-column: 1 / -1;
        }

        &.wds-list-item-hasInfo-hasPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto auto;
          grid-template-areas:
              "body control"
              "info control"
              "prompt prompt";


              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "body"
                    "info"
                    "prompt"
                    "control";
              }
        }

        &.wds-list-item-hasInfo-noPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body control"
              "info control";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "body"
                    "info"
                    "control";
              }
        }

        &.wds-list-item-noInfo-hasPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body control"
              "prompt prompt";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "body"
                    "prompt"
                    "control";
              }
        }

        &.wds-list-item-noInfo-noPrompt {
          grid-template-columns: 1fr auto;
          grid-template-rows: auto;
          grid-template-areas:
              "body control";

              &:has(.wds-list-item-button-control) {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                    "body"
                    "control";
              }
        }
      }

      &.wds-list-item-noMedia-noControl {
        .wds-list-item-prompt {
          grid-column: 1 / -1;
        }

        &.wds-list-item-hasInfo-hasPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto auto;
          grid-template-areas:
              "body"
              "info"
              "prompt";
        }

        &.wds-list-item-hasInfo-noPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body"
              "info"
        }

        &.wds-list-item-noInfo-hasPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
          grid-template-areas:
              "body"
              "prompt";
        }

        &.wds-list-item-noInfo-noPrompt {
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          grid-template-areas:
              "body"
        }
      }

      .wds-list-item-media {
        display: none;
        }

      .wds-list-item-body {
        grid-area: body;
        display: grid;
        grid-template-columns: 1fr;
        justify-items: start;
        gap: 0;

        .wds-list-item-value {
          text-align: left;
        }
      }

      .wds-list-item-button-control--hasPrompt{
        margin-top: var(--size-4);
      }
    }
  }
}