/**
 * Contact Button Component Styles
 *
 * @package Yacht
 */

.contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.contact-button__text {
  order: 1;
}

.contact-button__icon {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 23px;
  flex-shrink: 0;
}

.contact-button__icon svg {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.contact-button.btn--primary .contact-button__icon svg path {
  fill: var(--color-on-primary);
}

.contact-button.btn--outline .contact-button__icon svg path,
.contact-button.btn--transparent .contact-button__icon svg path {
  fill: var(--color-primary);
}

.contact-button.btn--primary:hover .contact-button__icon svg path {
  fill: var(--color-primary);
}

.contact-button.btn--outline:hover .contact-button__icon svg path,
.contact-button.btn--transparent:hover .contact-button__icon svg path {
  fill: var(--color-on-primary);
}