VNT-B2B Product-detail

{default $modal = false}

<div class="product-detail --column --w-12">
    <div class="product-detail__wrapper">
        <div class="product-detail__top --row --flex-space">
            <div class="product-detail__top-wrap --column --w-12 --w-s-6 ">
                <div class="product-detail__figure">
                    <img src="/userfiles/images/training.jpg" class="product-detail__img" alt="foto produktu">
                </div>
                <div class="product-detail__tags-wrap">
                    <span n:class="'product-detail__discount', $modal? 'product-detail__discount--modal'">
                    Sleva 20%
                </span>
                    <span n:class="'product-detail__novelty', $modal? 'product-detail__novelty--modal'">
                    Novinka
                </span>
                </div>
            </div>
            <div class="product-detail__information --column --w-12 --w-s-6 ">
                <div class="product-detail__info-wrap">
                    <div class="product-detail__manufacturer">
                    <span class="product-detail__manufacturer-left">
                        Výrobce:
                    </span>
                        <span class="product-detail__manufacturer-right">
                        <a href="#" class="product-detail__manufacturer-link">
                            Firma s.r.o.
                        </a>
                    </span>
                    </div>
                    <div class="product-detail__pn">
                    <span class="product-detail__pn-left">
                        Kód produktu
                    </span>
                        <span class="product-detail__pn-right">
                        XYC7WQC
                    </span>
                    </div>
                    <div class="product-detail__stock">
                    <span class="product-detail__stock-left">
                        Dostupnost
                    </span>
                        <span class="product-detail__stock-right">
                        Skladem
                    </span>
                    </div>
                </div>
                <div class="product-detail__variants">
                    <h3 class="product-detail__variants-title">
                        Varianty
                    </h3>
                    <div class="product-detail__variant">
                        <a href="#" n:attr="data-open: $modal ? '#modal-list-of-variants' : '#list-of-variants'" class="product-detail__variants-item">
                            <span class="product-detail__variants-color"></span>
                            <span class="product-detail__variants-color-name">
                                Oranžová
                            </span>
                            <span class="product-detail__variants-arrow">
                                <svg class="product-detail__variants-arrow-icon">
                                    <use xlink:href="/assets/front/sprite.svg#arrow_down"></use>
                                </svg>
                            </span>
                        </a>
                    </div>
                    <ul n:attr="id: $modal ? 'modal-list-of-variants' : 'list-of-variants'" class="product-detail__variants-list">
                        <li>
                            <a href="#" data-open="#list-of-variants" class="product-detail__variants-item">
                                <span class="product-detail__variants-color"></span>
                                <span class="product-detail__variants-color-name">
                                    Zelena
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#" data-open="#list-of-variants" class="product-detail__variants-item">
                                <span class="product-detail__variants-color"></span>
                                <span class="product-detail__variants-color-name">
                                    Zelena
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#" data-open="#list-of-variants" class="product-detail__variants-item">
                                <span class="product-detail__variants-color"></span>
                                <span class="product-detail__variants-color-name">
                                    Zelena
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="product-detail__basket">
                    <div class="product-detail__price">
                    <span class="product-detail__price-number">
                        4 344 Kč
                    </span>
                        <span class="product-detail__price-taxed">
                        5 499 Kč s DPH
                    </span>
                    </div>
                    <a href="#" class="product-detail__button button button--brand">
                        <svg class="product-detail__button-icon">
                            <use xlink:href="/assets/front/sprite.svg#basket_white"></use>
                        </svg>
                        Vhodit do košíku
                    </a>
                </div>
            </div>

        </div>

    </div>
</div>

.product-detail{
  padding-bottom: 1rem;

  @include media($medium){
    padding-bottom: 2rem;
  }

  @include media($large){
    padding-bottom: 3.5rem;
  }
}

.product-detail__wrapper{
  padding-top: 1rem;

  @include media($large){
    padding-top: 2.5rem;
  }
}

.product-detail__top{
  row-gap: 1rem;
}

.product-detail__top-wrap{
  position: relative;
}

.product-detail__information{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.product-detail__figure{
  max-width: 47rem;
  max-height: 29rem;
  display: flex;
  align-items: center;
  justify-content: center;

}



.product-detail__img{
  width: 100%;
  height: 100%;
}

.product-detail__tags-wrap{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  row-gap: 0.8rem;
  z-index: 100;
}

.product-detail__discount{
  color: $color__brand;
  border: 0.1rem solid $color__brand;
  font-weight: 700;
  font-size: 1.3rem;
  margin-right: 0.8rem;
  padding: 0.4rem 1rem;
  border-radius: 1.5rem;
}

.product-detail__discount--modal{
  background: $color__bg;
}

.product-detail__novelty{
  color: $color__secondary;
  border: 0.1rem solid $color__secondary;
  font-weight: 700;
  font-size: 1.3rem;
  margin-right: 0.8rem;
  padding: 0.4rem 1rem;
  border-radius: 1.5rem;

}

.product-detail__novelty--modal{
  background: $color__bg;
}

.product-detail__info-wrap{
  display: flex;
  flex-direction: column;
  row-gap: 0.8rem;
  margin-bottom: 2rem;
}

.product-detail__manufacturer, .product-detail__pn, .product-detail__stock,{
  display: flex;
  align-items: center;
  font-size: 1.6rem;
}

.product-detail__manufacturer-left, .product-detail__pn-left, .product-detail__stock-left{
  width: 10.5rem;
  margin-right: 2rem;
}

.product-detail__stock-right{
  font-size: 1.6rem;
  font-weight: 700;
  color: $color__expedited;
  margin-right: 1rem;
}

.product-detail__stock-right-nostock{
  font-size: 1.6rem;
  font-weight: 700;
  color: $color__cancelled;
  margin-right: 1rem;
}

.product-detail__variants{
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.product-detail__variants-title{
  font-size: 1.6rem;
  margin-bottom: 0.5rem;


  @include media($large){
    font-size: 1.6rem;
  }
}

.product-detail__variants-arrow-icon{
  width: 1.2rem;
  height: 0.7rem;
  fill: $color__secondary;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail__variants-arrow{
  margin-left: auto;
}

.product-detail__basket{
  display: flex;
  align-items: flex-start;
  flex-direction: row;

  flex-wrap: wrap;

  @include media($tiny){
    gap: 1rem;
  }


}

.product-detail__price{
  display: flex;
  flex-direction: column;
  margin-right: 2.5rem;
}

.product-detail__button{
  font-weight: 700;
  padding-left: 1rem;
  padding-right: 1rem;

  @include media($small){
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  @include media($medium){
    padding-left: 4.5rem;
    padding-right: 4.5rem;
  }

}

.product-detail__button-icon{
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.8rem;
}

.product-detail__price-number{
  font-weight: 700;
  font-size: 2.2rem;
  color: $color__text-dark;
}

.product-detail__price-taxed{
  font-size: 1.2rem;
  color: $color__text-gray;
}

.product-detail__variants-color-name{
  font-size: 1.6rem;
  color: $color__text-dark;
  line-height: 1;

}

.product-detail__variants-color{
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: $color__orange;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.6rem;
  margin-bottom: 0.2rem;
}

.product-detail__variants-item{
  display: flex;
  align-items: center;
  padding: 1.1rem 1.6rem;
  border: 0.1rem solid $color__border;
  margin-bottom: 1.8rem;
  border-radius: 0.4rem;
  min-width: 20rem;
  max-width: 35rem;
  width: 100%;

  @include media($large){
    min-width: 35rem;
  }
  .product-detail__variants-list--open &{
    border: 0;
    margin-bottom: 0;
    border-bottom: 0.1rem solid $color__border;
  }
}

.product-detail__variants-list {
  position: absolute;
  top: calc(100% - 1.8rem);
  background: $color__bg;
  border-radius: 0.4rem;
  height: 0;
  overflow: hidden;
  border: 1px solid transparent;
  transition: all 0.1s ease-in;
}

.product-detail__variants-list--open {
  height: 150px;
  will-change: height;
  overflow: auto;
  border: 1px solid $color__border;
  z-index: 100;
  background: $color__bg;
}

.product-detail__variants-list--modal {
  z-index: 10001;

}