.spr-social-icons {
  display: flex;
  align-items: center;
  gap: var(--social-icons-gap);
}

.spr-social-icons .spr-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  transition: all 0.2s ease;
  border: 0.0625rem solid var(--color-white);

  &:hover {
    color: var(--color-primary);
    background-color: var(--color-white);
  }

  &:nth-child(1) {
    border-radius: 0.90625rem;

    .spr-icon {
      width: 1.125rem;
      height: 1.125rem;
      transform: translateX(1px);
    }
  }

  &:nth-child(2) {
    border-radius: 0.375rem;

    .spr-icon {
      width: 1.25rem;
      height: 1.25rem;
      transform: translateX(-2px);
    }
  }

  &:nth-child(3) {
    border-radius: 0.90625rem;

    .spr-icon {
      width: 1.25rem;
      height: 1.25rem;
    }
  }

  &:nth-child(4) {
    border-radius: 0.375rem;

    .spr-icon {
      width: 1.5rem;
      height: 1.5rem;
    }
  }
}