:root {
  --color-primary: #007ace;
}

wsl-product-finder {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 1rem;

  .product-finder__option-block {
    /*flex: calc(((2 / 3) / 3) * 100% - 15%);*/
    flex: 1/3;
    min-width: 200px;
  }

  .product-finder__variant-block,
  .product-finder__model-block {
    /*flex: calc((1 / 3) * 100%);*/
    flex: 1;
    width: calc((1 / 3) * 100%);

    @media (max-width: 767px) {
      width: 100%;
    }
  }

  @media (max-width: 767px) {
    flex-direction: column;
  }
}

.product-finder__option-block__header,
.product-finder__variant-block__header,
.product-finder__model-block__header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;

  .step-container {
    .icon-container {
      --size: 20px;
      width: var(--size);
      height: var(--size);
      margin-right: 0.5rem;
      transition: all 0.3s ease;
      transform: rotate(0);

      * path {
        fill: #fff;
      }
    }
  }

  &::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #ccc;
    margin-left: 1rem;
  }

  &.inline {
    .product-finder__option-block__title,
    .product-finder__variant-block__title,
    .product-finder__model-block__title {
      flex-direction: row;

      .icon-container {
        --size: 16px;
        width: var(--size);
        height: var(--size);
        margin-right: 0.25rem;

        transform: rotate(0);
        transition: all 0.3s ease;

        * path {
          /* fill: #007ace !important; */
          fill: #ccc !important;
        }
      }
    }
  }
}

.product-finder__option-block__filter,
.product-finder__variant-block__filter,
.product-finder__model-block__filter {
  .field__input {
    border: 1px solid #ccc;
    height: 30px;
  }
}

.product-finder__option-block__filter {
  .field__input {
    width: 100%;
  }
}

.product-finder__variant-block__filter,
.product-finder__model-block__filter {
  .field__input {
    width: 100%;
  }
}

.product-finder__option-list {
  margin-top: 0.5rem;
  border: 1px solid #333;
  height: 300px;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  border-radius: 5px;

  .product-finder__option-list__item {
    padding: 0.5rem 1rem;
    border: none;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    display: block;
    width: 100%;
    background: none;
    text-align: left;

    &:hover {
      background: #c7c7c7;
    }

    &.active {
      background: #000;
      /* font-weight: bold; */
      color: #fff;
    }
  }
}

.product-finder__variant-list,
.product-finder__model-list {
  margin-top: 0.5rem;
  border: 1px solid #333;
  height: 300px;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  border-radius: 5px;
}

.product-finder__model-list {
  display: flex;
  overflow: hidden;
  justify-content: flex-start;

  .flex-wrapper {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    /* gap: 1rem; */
  }

  .product-finder__model-list__item {
    width: 200px;
    min-width: 200px;
    display: block;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.product-finder__variant-list__item {
  border: 1px solid #ccc;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0.5rem;
  height: calc(100% - 1rem);

  .product-finder__variant-list__item__title {
    font-weight: bold;
    margin: 0.5rem 0 0;
  }

  .product-finder__variant-list__item__sku {
    font-size: 0.85rem;
    color: #666;
  }

  .product-finder__variant-list__item__image {
    width: 100%;
    height: 150px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem;

    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  }
}

.product-finder__model-list__item {
  border: 1px solid #ccc;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0.5rem;
  height: calc(100% - 1rem);

  .product-finder__model-list__item__title {
    font-weight: bold;
    margin: 0.5rem 0 0;
    padding: 0 1rem;
    line-height: 1.1;
    font-size: 0.85rem;
    font-weight: normal;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-finder__model-list__item__sku {
    font-size: 0.85rem;
    font-weight: bold;
    color: #666;
    margin-top: 0.5rem;
    padding: 0 1rem;
    line-height: 1.1;
  }

  button {
    width: 100%;
    /*margin: 0.25rem 0.5rem 0;*/
  }

  .product-finder__model-list__item__actions {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0 1rem;
  }

  .product-finder__model-list__item__image {
    width: 100%;
    height: 150px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;

    img {
      max-width: 80%;
      max-height: 100%;
      object-fit: contain;
    }
  }
}

.product-finder__option-block,
.product-finder__variant-block,
.product-finder__model-block {
  .loading-indicator {
    .spinner {
      --size: 20px;
      width: var(--size);
      height: var(--size);
      margin: 1rem auto;
      fill: #ccc;
      animation: spin 1s linear infinite;
    }
  }

  &:hover {
    .step-container {
      background: var(--color-primary-hover);
    }

    .product-finder__variant-list,
    .product-finder__option-list,
    .product-finder__model-list {
      border-color: #007ace;
    }

    .product-finder__option-block__header,
    .product-finder__variant-block__header,
    .product-finder__model-block__header {
      /* animate the svg to rotate */
      .icon-container {
        transform: rotate(270deg);

        * path {
          fill: #ccc;
        }
      }
    }

    .inline {
      .product-finder__option-block__title,
      .product-finder__variant-block__title,
      .product-finder__model-block__title {
        .icon-container {
          * path {
            fill: #007ace !important;
          }
        }
      }
    }
  }

  .product-finder__option-options {
    height: 200px;
    width: 100%;
    border: 1px solid #ccc;
  }
}

.product-finder__option-block__title,
.product-finder__variant-block__title,
.product-finder__model-block__title {
  flex: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.step-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border-radius: 5px;
  padding: 0.25rem 0.5rem;
}

.step-shape {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 1;
  font-size: 0.75rem;
  text-transform: uppercase;
  white-space: nowrap;
}