@use "sass:color";
@use "../property/property.component";

$margin: 2px;
$padding: 5px;

.fa,
.fab,
.far,
.fas {
  color: honeydew;
  margin: $margin;
  padding: $padding;
  font-size: 30px;
  width: 40px;
  text-align: center;
  text-decoration: none;
  border-radius: 25%;
  box-shadow: 0 3px 10px rgb(0 0 0 / 25%);

  &:hover {
    opacity: 0.7;
    box-shadow: none;
  }
}

.fa-address-card {
  background: #20D060;
  padding: 7px 8px 7px 6px;
  font-size: 26px;
}

.fa-phone {
  background: #2f4859;
}

.fa-envelope {
  background: #e04c40;
}

.fa-linkedin {
  background: #0077B5;
}

.fa-twitter {
  background: #00aced;
}

.fa-facebook {
  background: #3B5998;
}

.fa-instagram {
  $pastelisation: 10%;
  $r: color.adjust(color.adjust(red, $lightness: $pastelisation), $saturation: - $pastelisation);
  $y: color.adjust(color.adjust(yellow, $lightness: $pastelisation), $saturation: - $pastelisation);
  $b: color.adjust(color.adjust(blue, $lightness: $pastelisation), $saturation: - $pastelisation);
  $m: color.adjust(color.adjust(magenta, $lightness: $pastelisation), $saturation: - $pastelisation);

  background: #cd486b;
  background: linear-gradient(165deg, $b, transparent 50%), linear-gradient(180deg, $m, transparent), linear-gradient(-90deg, $r, transparent), linear-gradient(0deg, $y, transparent);
  padding: 3px;
  font-size: 34px;

  &:hover {
    background: transparent;
  }
}

.fa-user-tie {
  background: #2f3f3f;
}

.fa-house-user {
  background: #2f3f3f;
}

.content {
  display: none;
}

@media print {
  .content {
    margin: $margin;
    padding: $padding;
    display: inline;
  }

  .list {
    flex-direction: column;
  }
}