/* Links */
.default-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;

  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  color: var(--blue);

  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.default-link p {
  white-space: normal;
}

.default-link.-underline p {
  text-decoration: underline;
}

.default-link.-white-text p {
  color: var(--white);
}

.default-link.-with-border {
  height: 25px;
  padding: 0 7px;

  border: 1px solid var(--blue);
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

.default-link.-with-border p {
  text-decoration: none;
}

.default-link.-with-icon p {
  text-decoration: none;
}

.default-link .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  min-width: 25px;
  height: 25px;
  padding: 6px;
  margin-top: -2px;

  background-color: rgba(53, 53, 79, 0.1);
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.default-link .icon svg,
.default-link .icon img {
  display: block;
  width: 100%;
  height: auto;
}

.default-link .icon + p,
.default-link p + .icon {
  margin-left: 8px;
}

.default-link.-with-arrow p {
  text-decoration: none;
}

.default-link .default-link-arrow + p,
.default-link p + .default-link-arrow {
  margin-left: 9px;
}

/* Default link arrow */

.default-link-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 8px;

  background-color: var(--blue);
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.default-link-arrow:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  -webkit-mask: url(../../images/ui/arrow.svg) no-repeat center;
  mask: url(../../images/ui/arrow.svg) no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.default-link.--white-text .default-link-arrow {
  background-color: var(--white);
}

.default-link.--white-text .default-link-arrow:after {
  background-color: var(--blue);
}