@use "_theme.scss";

.product-details {
  padding-top: 38px;
  @media (max-width: theme.$md) {
    padding-top: 0;
  }


  .product-name {
    line-height: 1;
    margin-bottom: 35px;
    font-size: var(--text-size-h2);
    color: var(--text-color-heading);

    @media (width < theme.$sm + 1) {
      font-size: var(--text-size-h4);
    }
  }

  .product-reorder {
    background-color: var(--color-fill);
    font-size: var(--text-size-regular);
    color: var(--text-color-dark);
    padding: 9px 10px;
    .reorder-link {
      font-size: var(--text-size-regular);
      color: var(--color-highlight);
      cursor: pointer;
      padding-left: 7px;
    }
  }

  .product-inventory-and-description {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 30px;

    .product-description {
      display: block;
      color: var(--text-color-medium);
      font-size: var(--text-size-regular);

      @media (max-width: theme.$lg) {
        margin-top: 15px;
        margin-bottom: 40px;
      }
    }

    .product-inventory {
      .inventory {
        font-size: var(--text-size-label);

        .inStock,
        .warning,
        .error {
          color: var(--text-color-ultra-dark);
          display: inline;
          &::before {
            content: " ";
            height: 7px;
            width: 7px;
            border-radius: 50%;
            margin-right: 8px;
            vertical-align: middle;
            display: inline-block;

            margin-bottom: 3px;
          }
        }

        .inStock::before {
          background-color: var(--color-success);
        }
        .warning::before {
          background-color: var(--color-warning);
        }
        .error::before {
          background-color: var(--color-error);
        }
      }
    }
  }

}
