@use '_theme.scss';

.draft-list-item {
  display: flex;
  position: relative;
  border-bottom: 2px solid var(--color-line);
  max-height: 1000px;
  transition: max-height 1s 2.5s;
  z-index: 1;

  &.close-item {
    max-height: 0;
    overflow: hidden;
  }

  .draft-item-wrapper {
    width: 100%;
    position: relative;
    display: flex;
    overflow: hidden;
    will-change: transform;
  }

  &.tooltip-open {
    .draft-item-wrapper {
      overflow: visible;
    }
  }

  .draft-item-alert {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--skeleton-base-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 20px;
    left: -100%;
    transition: left 0.6s;
    will-change: left;
    z-index: 2;

    .content {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .alert-icon {
      margin-bottom: 20px;

      svg path {
        stroke: var(--color-icon);
      }
    }

    .alert-message {
      color: var(--text-color-ultra-dark);
      font-size: var(--text-size-label);
      text-align: center;
      padding: 0 20px;
    }
  }

  .draft-item-content {
    width: 100%;
    padding: 20px;
    flex: 0 0 100%;
    transition: transform 0.6s;
    position: relative;
    transform: translateX(0);
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
    "thumbnail info actions"
    "validations validations actions";
    gap: 20px;
    align-items: start;

    @media (max-width: theme.$sm) {
      grid-template-columns: 1fr;
      grid-template-areas:
        "info info"
        "thumbnail actions"
        "validations validations";
      gap: 15px;
    }
  }

  .draft-item-wrapper.alert-open {
    overflow: hidden;

    .draft-item-alert {
      left: 0;
    }

    .draft-item-content {
      transform: translateX(110%);
    }
  }

  .draft-item-thumbnail-container {
    grid-area: thumbnail;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .draft-item-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;

    .draft-item-product-name {
      order: 1;
    }

    .draft-description-container {
      order: 2;
    }

    .draft-sub-items-details-wrapper {
      order: 3;
    }

    .draft-sub-items {
      order: 4;
    }

    .draft-item-date {
      order: 5;
      margin-top: auto;
    }

    .draft-item-unavailable {
      order: 6;
    }

    @media (min-width: calc(theme.$sm + 1px)) {
      padding-right: 10px;
    }

    @media (max-width: theme.$sm) {
      gap: 10px;

      .draft-item-product-name {
        order: 1;
      }

      .draft-description-container {
        order: 3;
      }

      .draft-sub-items-details-wrapper {
        order: 4;
      }

      .draft-item-date {
        order: 2;
      }

      .draft-item-unavailable {
        order: 5;
      }
    }
  }

  .draft-item-validation-messages {
    grid-area: validations;
  }

  .draft-item-product-name {
    font-size: var(--text-size-label);
    color: var(--text-color-ultra-dark);
  }

  .draft-item-date {
    font-size: var(--text-size-label);
    color: var(--text-color-ultra-dark);
  }

  .draft-item-unavailable {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-error);
    font-size: var(--text-size-small);

    .unavailable-icon {
      flex-shrink: 0;
      svg  path:nth-child(1) {
        fill: var(--color-error);
      }
    }

    .unavailable-text {
      color: var(--color-error);
    }
  }

  .draft-item-actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    height: 100%;
    justify-content: center;

    @media (max-width: theme.$sm) {
      flex-direction: column;
      gap: 10px;
    }
  }

  .draft-continue-button {
    min-width: 160px;
    height: 40px;
    line-height: 1;

    @media (max-width: theme.$sm) {
      min-width: 120px;
      height: 35px;
    }

    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  .draft-item-secondary-actions {
    display: flex;
    align-items: center;
    gap: 5px;

    .action-separator {
      color: var(--color-line);
    }
  }
}