/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

.lists {
  @include newtab-card-style;

  border-radius: var(--border-radius-large);
  padding-block-start: var(--space-medium);
  // @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
  box-shadow: var(--card-box-shadow, var(--box-shadow-card));

  // Classic layout (when Nova is disabled)
  // @nova-cleanup(remove-conditional): Remove classic fixed-width/height styles after Nova ships
  .classic-enabled & {
    grid-column: span 1;
    width: var(--newtab-card-grid-layout-width);
    height: var(--newtab-card-height);

    // Match the new card width if sections are enabled
    .has-sections-grid & {
      width: var(--newtab-card-width-medium);
    }
  }

  position: relative;
  display: flex;
  flex-direction: column;

  .confetti-canvas {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* adjust as needed to sit above background but below UI */
  }

  .select-wrapper {
    padding-inline: var(--space-medium);
    display: flex;
    justify-content: flex-start;
    position: relative;
    align-items: center;
    gap: var(--space-medium);

    moz-button {
      visibility: hidden;
      margin-inline-start: auto;
    }
  }

  &:hover,
  &:focus-within,
  .select-wrapper panel-list[open] {
    .select-wrapper moz-button {
      visibility: visible;
    }
  }

  .edit-list {
    outline: var(--focus-outline);
  }

  .add-task-container {
    margin-block: var(--space-small);
    padding-inline: var(--space-medium);
    position: relative;

    .icon.icon-add {
      position: absolute;
      inset-block-start: 50%;
      transform: translateY(-50%);
      // Bug 1967304 - Custom alignment for absolutely positioned element
      inset-inline-start: calc(var(--space-medium) + var(--space-small));

      &.icon-disabled {
        fill: var(--text-color-disabled);
      }
    }

    .add-task-input {
      background: var(--button-background-color);
      padding-block: var(--space-small);
      // Bug 1967304 - Custom alignment for absolutely positioned element
      padding-inline-start: calc((var(--space-large) * 2) + var(--space-xsmall));
      padding-inline-end: var(--space-large);
      outline: none;
      border: none;
      border-radius: var(--border-radius-small);
      width: 100%;

      &:focus {
        outline: var(--focus-outline);
      }

      &:focus::placeholder {
        color: var(--newtab-text-primary-color);
      }

      &:disabled {
        background-color: var(--button-background-color-ghost);
        color: var(--text-color-disabled);
        outline: var(--border-width) solid var(--border-color-interactive-disabled);
      }
    }
  }

  // Height necessary to vertically center empty state
  .task-list-wrapper {
    height: 100%;
    padding-block-start: var(--space-xsmall);
  }

  fieldset {
    margin: 0;
    padding-block: 0;
    padding-inline: var(--space-medium);
    border: none;
    overflow-y: auto;
    max-height: 165px;

    &:focus {
      outline: var(--focus-outline);
    }
  }

  .task-item {
    align-items: center;
    background: transparent;
    border-radius: var(--border-radius-small);
    display: flex;
    justify-content: space-between;
    transition: opacity 300ms ease;
    margin-block-end: var(--space-xsmall);

    // Spacing between uncompleted task and "Completed" list
    &.task-type-tasks {
      &:last-of-type {
        margin-block-end: var(--space-small);
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      &.exiting {
        opacity: 0;
      }
    }

    .checkbox-wrapper {
      display: flex;
      align-items: center;
      flex-grow: 2;
      padding-block: var(--space-small);

      span {
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        white-space: normal;
        max-width: 180px;
      }
    }

    input[type='checkbox'] {
      height: var(--size-item-small);
      width: var(--size-item-small);
      accent-color: var(--color-accent-primary);
      margin-inline-start: var(--space-small);
      padding: 0;
    }

    .task-label {
      position: relative;
      padding-inline-start: var(--space-small);
    }

    input:checked ~ .task-label {
      color: var(--text-color-deemphasized);
      text-decoration: line-through;
    }

    moz-button {
      margin-inline-end: var(--space-xsmall);
      visibility: hidden;

      &:has(+ panel-list[open]) {
        visibility: visible;
      }
    }

    &:hover,
    &:focus-visible,
    &:focus-within {
      background: var(--button-background-color);

      moz-button {
        visibility: visible;
      }
    }

    panel-list[open] {
      ~ moz-button {
        visibility: visible;
      }
    }

    .edit-task {
      margin-inline-start: var(--space-small);
      max-width: 180px;
      border: none;
      border-radius: 0;
      user-select: text;

      &:focus {
        outline: var(--focus-outline);
      }
    }
  }

  .empty-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-small);
    height: 100%;
    padding-block-end: var(--space-medium);

    @include wallpaper-contrast-fix;

    .empty-list-text {
      margin: 0;
      text-align: center;
      color: var(--text-color-deemphasized);
      font-size: var(--font-size-small);
      padding-inline: var(--space-medium);
    }
  }

  .completed-task-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
  }

  .completed-task-wrapper summary {
    list-style: none;

    &:focus {
      outline: var(--focus-outline);
    }

    .completed-title {
      color: var(--text-color-deemphasized);
      position: relative;

      &::after {
        content: '';
        -moz-context-properties: fill;
        fill: var(--button-icon-fill);
        background-image: url('chrome://global/skin/icons/arrow-right.svg');
        height: var(--icon-size-small);
        width: var(--icon-size-small);
        position: absolute;
        inset-inline-end: calc(-1 * var(--space-xlarge));
        inset-block-start: 50%;
        transform: translateY(-50%);
      }

      &:dir(rtl)::after {
        background-image: url('chrome://global/skin/icons/arrow-left.svg');
      }
    }
  }

  .completed-task-wrapper[open] .completed-title::after {
    background-image: url('chrome://global/skin/icons/arrow-down.svg');
  }
}