VNT-B2B Contact-box

{default $footer = false}
{default $productTabs = false}


<div n:class="'contact-box', $footer? 'contact-box--footer'">
    <div n:class="'contact-box__wrapper', $productTabs? 'ccontact-box__wrapper contact-box__wrapper--tabs'">
        <div n:class="'contact-box__figure', $productTabs? 'contact-box__figure contact-box__figure--tabs'">
            <img class="contact-box__img" alt="foto kontaktu" src="/userfiles/images/contact.jpg">
        </div>
        <div n:class="'contact-box__texts', $productTabs? 'contact-box__texts--tabs'">
            <h5 n:if="$footer" class="contact-box__title">
                Rychlý kontakt
            </h5>
            <h5 n:if=$productTabs class="contact-box__title contact-box__title--product-tabs">
                Rychlý kontakt
            </h5>
            <div n:class="'contact-box__texts-wrap', $productTabs? 'contact-box__texts-wrap--tabs'">
                <div n:class="'contact-box__name', $productTabs? 'contact-box__name--tabs'">
                    Natalie Pecháčková
                </div>
                <a href="#" n:class="'contact-box__phone', $productTabs? 'contact-box__phone--tabs'">
                    <svg class="contact-box__phone-icon">
                        <use xlink:href="/assets/front/sprite.svg#phone"></use>
                    </svg>
                    +420 555 555 555
                </a>
                <a n:if="!$footer && !$productTabs"  href="#" class="contact-box__link">
                    Přejít na formulář
                </a>
                <a n:if="$footer || $productTabs" href="#" n:class="'contact-box__mail', $productTabs? 'contact-box--tabs'">
                    <svg class="contact-box__mail-icon">
                        <use xlink:href="/assets/front/sprite.svg#mail"></use>
                    </svg>
                    mail@mail.com
                </a>
                <span n:if="$productTabs" class="contact-box__opening">
                    (Po - Pá: 8 až 18 hod.)
                </span>
            </div>

        </div>
    </div>
</div>

.contact-box__wrapper{
  display: flex;
  align-items: center;
  max-width: 22.5rem;

  .contact-box--footer &{
    max-width: unset;
  }

  .contact-box-big &{
    max-width: unset;
  }

}

.contact-box__figure{
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;

  @include media($medium){
    width: 6.5rem;
    height: 6.5rem;
  }

  .contact-box--footer &{
    width: 9rem;
    height: 9rem;
    margin-right: 2rem;
    @include media($small){
      width: 12.2rem;
      height: 12.2rem;
      margin-right: 4.5rem;
    }
  }

  .contact-box-big &{
    width: 9rem;
    height: 9rem;
    margin-right: 2rem;
    @include media($small){
      width: 12.2rem;
      height: 12.2rem;
      margin-right: 4.5rem;
    }
  }
}

.contact-box__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-box__phone-icon{
  margin-right: 1rem;
  width: 1.3rem;
  height: 1.2rem;
  fill: $color__brand;
}

.contact-box__mail-icon{
  margin-right: 1rem;
  width: 1.3rem;
  height: 1.1rem;
  fill: $color__brand;
}

.contact-box__texts{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 1.5rem;

  .contact-box-big &{
    row-gap: 0;

  }
}



.contact-box__texts-wrap{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;

  .contact-box--footer &{
    align-items: flex-start;
  }

  .contact-box-big &{
    align-items: flex-start;
  }

}

.contact-box__title{
  font-size: 1.8rem;
  font-weight: 700;

  .contact-box-big &{
    margin-bottom: 1rem;
    font-size: 2rem;
    color: $color__brand;
  }
}

.contact-box__name{
  color: $color__text-dark;
  font-weight: 700;
  font-size: 1.4rem;
  text-align: right;
  margin-bottom: 0.3rem;

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

.contact-box__phone, .contact-box__mail{
  display: flex;
  align-items: center;
  margin-bottom: 0.3rem;
  font-size: 1.2rem;
  color: $color__text-dark;

  @include media($medium){
    font-size: 1.3rem;
  }

  &:focus, &:hover{
    color: $color__link-h;
  }

  .contact-box--footer &{
    text-decoration: underline;
  }

  .contact-box-big &{
    text-decoration: underline;
  }
}

.contact-box__mail{
  margin-bottom: 2.5rem;
}

.contact-box__link{
  text-decoration: underline;
  font-size: 1.2rem;
  @include media($medium){
    font-size: 1.3rem;
  }
}

.contact-box__title--product-tabs{
  color: $color__brand;
  margin-bottom: 0.5rem;
}

.contact-box__opening{
  color: $color__text-gray;
  font-size: 1.3rem;

  .contact-box-big &{
    color: $color__text;
    text-decoration: none;
  }

}

.contact-box__phone-wrap{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 1.5rem;
}

.contact-box--tabs{
  font-size: 1.3rem;
  text-decoration: underline;
}

.contact-box__texts-wrap--tabs{
  align-items: flex-start;
}

.contact-box__phone--tabs{
  text-decoration: underline;
}

.contact-box__texts--tabs{
  row-gap: 0;
}

.contact-box__figure--tabs{
  width: 11.5rem;
  height: 11.5rem;
  margin-right: 2.4rem;
}

.contact-box__wrapper--tabs{
  max-width: unset;
}

.contact-box__name--tabs{
  text-align: left;
}

.contact-box__button{
  padding: 0.6rem 2.5rem;
  min-height: 3.4rem;
}