@use "sass:color";
@use "sass:meta";

@mixin contact($color, $text-color: $color) {
  cursor: pointer;
  color: $text-color;
  background-color: color.adjust($color, $alpha: -0.1);
  padding: 7px 25px;
  min-width: 70px;
  max-width: 70vw;
  overflow-wrap: break-word;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px 1px color.change(black, $alpha: 0.10),
	      0 1px 10px 5px color.change(black, $alpha: 0.09),
	      0 3px 16px 8px color.change(black, $alpha: 0.04),
	      0 0 0 1px color.change(black, $alpha: 0.05);
  transition: box-shadow 0.3s ease-in-out;

  &:hover {
    box-shadow: 0 1px 4px 1px color.change($color, $alpha: 0.10),
	      0 1px 10px 5px color.change($color, $alpha: 0.09),
	      0 3px 16px 8px color.change($color, $alpha: 0.04),
	      0 0 0 1px color.change($color, $alpha: 0.05);
  }
  & h3 {
    text-align: center;
  }

  & p {
    user-select: none;
  }

  & noscript {
    text-overflow: ellipsis;
  }
}