/*
MARK: CTA
*/
.cta{
  flex-shrink: 0;
  position:relative;
  display: flex;
  padding: 24px;
  align-items: center;
  gap: 10px;
  border-radius: 15px;
  transition: ease all 150ms;
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;

  font-size: 1rem;
  line-height: normal;

  width: fit-content;
  &.cta--centered {
    margin: 0 auto;
  }
  >*{
    padding: 0;
    margin: 0;
  }

  p{
    line-height: 100%;
  }
}
@media all and (min-width: 1000px){
  .cta {
    font-size: 1.125rem;
  }
}
/*
MARK: COLORS
*/
.cta:hover{
  text-decoration: none;
}
.cta--style-primary{
  background-color: var(--color-primary--1);
  color: var(--color-white);
}
.cta--style-primary:hover {
  background-color: var(--color-primary--2);
}
.cta--style-secondary{
  background-color: var(--color-secondary--1);
  color: var(--color-white);
}
.cta--style-secondary:hover {
  background-color: var(--color-white);
  color: var(--color-primary--1);
}
.cta--style-secondary:hover p {
  color: var(--color-primary--1);
}
.variant-white .cta--style-secondary:hover  {
  background-color: var(--color-primary--1);
  color: var(--color-white);
}
.variant-white .cta--style-secondary:hover p {
  color: var(--color-white);
}
.cta--style-white{
  background-color: var(--color-white);
  color: var(--color-primary--1);
}
.cta--style-white:hover {
  background-color: var(--color-primary--1);
  color: var(--color-white);
}
.cta--style-white-primary{
  background-color: var(--color-white);
  color: var(--color-primary--1);
  border: 2px solid var(--color-primary--1);
}


/*
MARK: PHONE ICON
*/
.cta--phone-1{
  &::before{
    content: "";
    display: block;
    width: 28px;
    height: 21px;
    transition: ease all 150ms;
    background-image: url("../../images/ic_baseline-phone.svg");
    background-repeat: no-repeat;
    background-size: 26px 26px;
  }
  &:hover::before {
    background-image: url("../../images/ic_baseline-phone-blue.svg");
  }
}